CSS學習——屬性選擇器
阿新 • • 發佈：2018-11-19
前言
前面分享了子元素選擇器，在這裡給大家分享一下我學習到的屬性選擇器。
屬性選擇器
屬性選擇器是指選擇具有某些屬性的元素，表現表現的形式有下面的幾種：
- name，選擇name有關的元素
- name=value，選擇name=value的元素
- name^=value，表示選中以value開頭的元素
- name$=value，表示選中以value結尾的元素
下面通過程式碼例項來說明：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*選擇中具有name屬性的元素 屬性：開始標籤後面 屬性名="值" 可以理解為：[選擇條件] * */ /*input[name]{ border: 1px solid red; }*/ /*選中input中type=password的元素*/ /*input[type=password]{ border: 1px solid red; }*/ /*^表示以什麼東西開頭的都會被選中，選中input中 name值以u開頭的那些元素*/ /*input[name^=u]{ border: 1px solid red; }*/ /*$表示以什麼東西結尾的都會被選中，選中input中 name值以e結尾的那些元素*/ input[name$=e]{ border: 1px solid red; } </style> </head> <body> <!--表單 type=text 輸入框 --> <input type="text" name="username"/> <input type="text" name="use"/> <input type="text" name="us"/> <input type="text" /> <!-- type=password 密碼框--> <input type="password" /> <div name="xiaobai"></div> </body> </html>
上面屬性選擇器的4種情況都有些寫出來，需要看某種情況就把其中一種註釋取消掉執行程式碼就可以看到了。