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

[attribute]屬性

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

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

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

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

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

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

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

很顯然，上面的方式對編程時標簽的命名都有很高的要求。

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

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

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

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

在企業開發中，要根據需求選擇不同的選擇器類型來實現樣式功能。