再聊CSS的屬性選擇器
屬性選擇器是很強大很神奇的。很多時候可以幫助你擺脫一些棘手的問題，可以讓你避免類名的新增，甚至還可以指出程式碼中的一些問題。屬性選擇器是複雜而又強大的，但不用擔心，因為它也是易於學習和使用的。在本文中，將會學習到CSS屬性選擇器的強大功能以及如何在實際工作中運用它。並提供了一些關於如何使用屬性選擇器的一些個人想法。
我一直以來都覺得CSS屬性選擇器很強大，也特別的有魔性。記得第一次接觸CSS屬性選擇器的時候，是在國外的某部落格上，滑鼠懸浮到連結上，可以立馬的知道是外部連結還是本地連結，另外在下載資源的連結上可以立馬看到下載的資源格式。這一切讓我覺得好神奇，好強大。當然更令我感到驚奇的是，列印Web頁面的時候，對應的連結文字後面居然能打印出其對應的連結地址。這些引起我強大好奇心，所以我決定去一探究竟，才知道這一切的魔力都來源於CSS的選擇器： CSS屬性選擇器 ！
對於初學者，我想你此時或許也感到好奇。只要你有這樣的好奇心就好辦。通過接下來的內容學習之後，你除了能很快掌握前面提到的特性之外，你甚至還可以使用CSS屬性選擇器在你的專案中做一些Debug的功能，它們能很快的幫助你定位到問題的根源，幫助你修復其他無法解決的問題。而且這種體驗非常的爽，就像是變魔術一樣。你可能會認為你又再裝逼了，其實你只要理解了CSS屬性選擇器的強大功能之後，你可能會覺得自己太誇張了。
CSS屬性選擇器的使用非常的簡單，你只要把HTML的屬性（包括自定義屬性）放在一箇中括號 [] 中即可，比如：
[href] {
color: green;
}
任何具有 href 屬性而且沒有其他選擇器指定的樣式覆蓋，那麼文字的顏色會變成 green 。
注意CSS選擇器權重相關的知識，就權重而言，CSS屬性選擇器和類選擇器權重是一樣的。如果你對CSS選擇器權重相關的知識有點模糊的話，建議你花點時間閱讀《 ofollow,noindex" target="_blank">你應該知道的一些事情：CSS權重 》一文。
上面的示例，只是CSS屬性最基本的用法，其實它可以做更多的事情。就像人體的DNA資訊一樣，它們有內在的邏輯（比如說簡單的正則規則），可以幫助你選擇各種屬性組合和值。可以匹配屬性中的任何屬性，甚至是字串值，而不僅僅是精確的匹配標籤、類或 id 選擇器。
在深入探討CSS屬性選擇器其他一些高階用法之前，先來簡單的瞭解一點點基礎知道，這些基礎知識有助於你更好，更快的掌握CSS屬性選擇器。
CSS屬性選擇器發展歷程
CSS屬性選擇器最早出現在CSS2之中。隨著W3C規範模組化劃分的改革，時至今日也就沒有CSS3,CSS4之說了。我們也跟著規範來說。在 CSS Selectors Level 3 和 CSS Selectors Level 4 兩個版本中都有CSS屬性選擇器的身影。從兩個版本的規範中中介紹的對比來看，Level4從Level3的四個部分增加到了五個部分：
- 屬性和屬性值選擇器，CSS2最早引入的四個屬性選擇器：
[attr]、[attr = val]、[attr ~= val]和[attr |= val] - 匹配屬性選擇器的子字串，CSS3新引入的三個屬性選擇器：
[attr ^= val]、[attr $= val]和[attr *= val] - 屬性選擇器和名稱空間：屬性選擇器中屬性名是CSS限定名稱，前面宣告的名稱空間字首可以放在名稱空間分隔線分隔的屬性名前面，比如
[*|attr] { color: yellow }（表示只與屬性attr匹配的元素，而不考慮屬性的名稱空間） -
DTD中的預設屬性值：屬性選擇器表示文件樹中的屬性值。如何構造文件樹超出了選擇器的範圍。在某些文件格式中，預設屬性值可以在DTD中或其他地方定義，但這些值嗡有在文件樹中出現時由屬性選擇器選擇。 （這麼多年以來，幾乎未曾用過） - 忽略大小寫敏感：比如
[attr = "val" i],這是在Level4中新增的一條。預設情況下，選擇器中的屬性名和值有可能有大小寫敏感之分（需要取決於文件語言），為了不受文件語言規則影響能匹配到屬性值，屬性選擇器可以在右括號]前帶上一個i（或I）識別符號。當出現此標誌時，UAs必須在ASCII範圍內不敏感地匹配屬性的值大小寫。
特別記住了，現在W3C規範中已經沒有CSS版本號一說（比如CSS2,CSS3，CSS4之類的），現在都是按功能模組化進行劃分，然後給功能模組新增Level x來進行區分，比如Level 3、Level 4之類的。所以，今後文章看到CSS4一說的，基本上都是在忽悠你的。切記！切記！切記！(^_^)
正則表示式
在上面的內容中，我們看到了在屬性選擇器中有 [attr ^= val] 、 [attr $= val] 和 [attr *= val] 。其中 ^ 、 $ 、 * 之類的符號，是不是特別的像JavaScript中正則表示式中使用到的一些符號。其實這些關鍵字元，和JavaScript中的正則表示式中的符號類似。這些符號在CSS屬性選擇器中也有著其特殊的含義：
-
^：表示字串開始位置匹配 -
$：表示字串結束位置匹配 -
*：表示字串任意位置匹配 -
i：表示字串匹配不區分大小寫敏感
屬性選擇器如何使用？
屬性選擇器可以獨立存在，也可以更具體，比如下面的選擇器可以匹配到所有帶 title 屬性的 div ：
div[title]
也可以像下面這樣匹配到 div 中帶 title 屬性的後代子元素：
div [title]
注意這兩者之間的差異，如果它們之間沒有空格，意味著屬性在同一個元素上，如果有空格，則意味著是一個後代選擇器，父元素是一個 div ，後代元素是帶 title 屬性的任何元素。表示選擇具有該屬性的所有後代元素。
在使用屬性選擇器的時候，也可以設定屬性具體的值：
div[title="w3cplus"]
該選擇器可以讓你匹配到帶有 title 屬性，而且其值必須是 w3cplus 的所有 div 。記住，其值必須是 w3cplus ，如果 title 的值是 W3cplus 或 W3CPLUS 之類的，那就無法匹配上，因為它們有大小寫敏感：
當然，如果你要處理對值大小敏感還是有辦法的，稍後我們會介紹。請繼續往下閱讀。
有的時候你的 title 不會只是一個單詞，有可能變成了 I like w3cpuls 或者 I am from w3cplus ，這個時候你還想通過 w3cplus 值來進行匹配，那麼你需要在等 = 前新增一個波浪號 ~ ，即可 [attr ~= val] 的形式，比如：
div[title~="w3cplus"]
從上面的結果可以看出， [attr ~= "val"] 屬性選擇器，只要是 attr 屬性的值包含 val