屬性選擇器的主要作用個人的理解就是對帶有指定屬性的元素設定css樣式。
使用css3的屬性選擇器，可以指定元素的某個屬性，也可以指定某個屬性和這個屬性所對應的值。
css3的屬性選擇器主要包括下面幾種
e[attr]：只使用屬性名，但沒有確定任何屬性值；
e[attr="value"]：指定屬性名，並指定了該屬性的屬性值；
e[attr~="value"]：指定屬性名，並且具有屬性值，此屬性值是乙個詞列表，並且以空格隔開，其中詞列表中包含了乙個value詞，而且等號前面的「〜」不能不寫；
e[attr^="value"]：指定了屬性名，並且有屬性值，屬性值是以value開頭的；
e[attr$="value"]：指定了屬性名，並且有屬性值，而且屬性值是以value結束的；
e[attr*="value"]：指定了屬性名，並且有屬性值，而且屬值中包含了value；
e[attr|="value"]：指定了屬性名，並且屬性值是value或者以「value-」開頭的值（比如說zh-cn）;
1.e[attr]屬性選擇器
.head a [id]
.head 下所有帶有id屬性的a都將背景色變成黑色
.head a [id][href]
.head 下所有帶有id和href屬性的a都將背景色變成黑色
2.e[attr="value"]這個選擇器必須指定值
.head a [id=「first」]
或者寫成.head a [href="aaa.html"][id]
需要注意的是，如果class有2個共用，必須要和html中的一樣如：
href=""class="links item"
title="open the website">7a>
.heada[class="links item"]
;//正確
.head3.e[attr ~="value"] 包含value(必須是乙個完整的值)這個值即可a[class="links"]
;//錯誤
href=""class="links item"
title="open the website">7a>
.head4.e[attr ^="value"] 以value值開頭的都將被選中a[class~="links"]
;//正確（只需要value值在attr中被包含即可）
;//第乙個被選中5.e[attr $="value"] 以value值結束的都將被選中
;//第乙個被選中6.e[attr *="value"] 只要包含value就可以（value甚至可以是乙個單詞的一半）
href=""class="links item"
title="open the website">7a>
.head7.e[attr |="value"] 值等於value活著以value-開頭a[class*="lin"]
;//正確（只需要value值在attr中被出現過即可）
a[lang|="zh"]
href=""這些屬性選擇器ie6不支援，其餘均正常class="links active item"
title="test website"
target="_blank"
lang="zh">2a>
href="sites/file/test.html"
class="links item"
title="this is a link"
lang="zh-cn">3a>
href="sites/file/test.png"
class="links item"
target="_balnk"
lang="zh-tw">4a>
2,3,4都將被選中
CSS選擇器之屬性選擇器 關係選擇器
e代表標籤名，如p,div等等 att表示該標籤定義了的乙個屬性名，如class id等，value為該屬性的屬性值，該屬性值為包含字首 value的子字串。若去掉e,則表示匹配滿足條件的任意元素 基本原理同上，不過value表示該屬性值應包含以value為字尾的子字串 基本原理同上，但value表...
html 選擇器之基礎選擇器
我把css選擇器分開成三部分，第一部分是我們常用的部分，我把他叫做基本選擇器 第二部分我把他稱作是屬性選擇器，第三部分我把他稱作偽類選擇器 一 基礎選擇器 1.萬用字元 選中所有的元素 2.元素選擇器 e 乙個元素作為乙個選擇器，div，ul，dd，span等等 3 類選擇器 class 定義cla...
CSS選擇器 屬性選擇器
最近重新學習了css3，發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...