屬性選擇器是通過標簽的屬性來匹配元素，使用中概括號進行標識。
為了方便觀看，把css代碼寫入html頁當中。
現在通過title這個屬性來選擇這個頁面所有的帶有title屬性的標簽。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style > [title]{ color:red; } </style> </head> <body> <button title="登錄" >登錄</button> <button>登錄</button> </body> </html>
現在通過title屬性里面的屬性值來選中。font-size改變字體大小，font-weight改變字體寬度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style > [title="登錄"]{ color:red; } [title="注冊"]{ color:green; font-size: 18px; font-weight: 600; } </style> </head> <body> <button title="登錄" >登錄</button> <button title="注冊" >注冊</button> </body> </html>
通過選擇屬性中屬性值來確認。格式：[屬性="所有"]{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style > [title="這是百度"]{ color:red; } </style> </head> <body> <button title="點擊登錄" >登錄</button> <button title="注冊" >注冊</button> <a title="這是百度" href="https://wwww.baidu.com">baidu</a> </body> </html>
通過選擇屬性中屬性值的開頭屬性值來確認。格式：[屬性^="開頭"]{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style > [title^="這是"]{ color:red; } </style> </head> <body> <button title="點擊登錄" >登錄</button> <button title="注冊" >注冊</button> <a title="這是百度" href="https://wwww.baidu.com">baidu</a> </body> </html>
通過選中屬性中屬性值的結尾部分來選中。格式：[屬性$="結尾"]{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style > [title^="點擊"]{ color:red; } </style> </head> <body> <button title="點擊登錄" >登錄</button> <button title="注冊" >注冊</button> <a title="這是百度" href="https://wwww.baidu.com">baidu</a> </body> </html>
2019-08-24 10:48:26