屬性選擇器可以通過指定查找標(biāo)簽中擁有某個(gè)屬性來選擇標(biāo)簽，也可以通過查找標(biāo)簽中擁有某個(gè)屬性，并且這個(gè)屬性有個(gè)特定的值來選擇標(biāo)簽。

[attribute]屬性

通過這種方式來指定我們的標(biāo)簽，比如，指定頁面標(biāo)簽中的 img 標(biāo)簽，并且這個(gè) img 標(biāo)簽擁有 alt 屬性。這個(gè)時(shí)候我們要指定它，就可以使用這個(gè)選擇器，格式為 img[alt]

[attribute]屬性也可以選擇里面的值為什么來選擇標(biāo)簽，常用在input 標(biāo)簽中。

在CSS2中，我們通過 [attribute|=value] 指定該屬性的屬性值的開頭是什么單詞來指定標(biāo)簽。如，選擇input 標(biāo)簽中 type為passWord 的標(biāo)簽，格式為 input[type|=password]。

我們可以通過 [attribute~=value] 指定該屬性的屬性值包含什么單詞來指定標(biāo)簽。如，選擇class 屬性中包含 abc 屬性值得標(biāo)簽，那么格式就為 input[class~=abc]。

看上去以上兩種似乎功能都很強(qiáng)大，但是都有一定的缺陷。

使用 [attribute|=value] 在指定開頭屬性值的時(shí)候，如果選擇的屬性值內(nèi)容很多，那么它所指定的屬性值必須是有“-”隔開的才能被選中，這個(gè)時(shí)候弊端就出來了，需要程序員在命名時(shí)很有講究，比如查找<p class="abcdef" ></p>出來，這時(shí)候用這個(gè)選擇器查找 p[class|=abc] 就無法找到了，除非 p 標(biāo)簽原有的class 屬性值為 abc-def。

而使用[attribute~=value] 在指定包含屬性值標(biāo)簽的時(shí)候，同樣的有它打弊端，這個(gè)選擇器要求包含在屬性值中的內(nèi)容，必須用空格隔開，比如查找<p class="abcdef"></p>，如果我們我們輸入 p[class~=cd]，這樣是無法找到這個(gè)標(biāo)簽的，除非class 原來的值為 class=ab cd ef。

很顯然，上面的方式對編程時(shí)標(biāo)簽的命名都有很高的要求。

在CSS3中的[attribute] 屬性有了新的符號(hào)可以替代和消除這些弊端。

當(dāng)我們想要查找到屬性值開頭為某個(gè)單詞的標(biāo)簽時(shí)，我們使用 [attribuet^=value] 來指定，使用這個(gè)方法，比如我們想要找到input 標(biāo)簽中 type為password 的標(biāo)簽，我們只要通過 input[type^=p] 就可以找到了，這里的 p 也可以換成以 p 開頭一直往下的幾位的都行。

有了開頭，CSS3還提供了CSS2沒有的，以某個(gè)屬性值結(jié)尾的功能，我們使用 [attribute$=value] 來指定，使用這個(gè)方法，我們想要找到input 標(biāo)簽中 type為password 的標(biāo)簽，我們只要通過 input[type$=d] 就可以查找到，同樣的，這里的 d 也可以換成以 d 開始往上的幾位都行。

最后還有包含功能，我們想要找到<p class="abcdef" ></p>，我們可以通過使用 [attribute*=value] 來指定，格式為 p[class*=ed] ，這里的 ed 也可以向兩邊自由拉伸變化。

在企業(yè)開發(fā)中，要根據(jù)需求選擇不同的選擇器類型來實(shí)現(xiàn)樣式功能。