最詳細的css3選擇器解析

選擇器是什麼？

　　比較官方的解釋：在 CSS 中，選擇器是一種模式，用於選擇需要新增樣式的元素。

       最常見的 CSS 選擇器是元素選擇器。換句話說，文件的元素就是最基本的選擇器。

       看程式碼，元素選擇器就是這個：

      h1作為一個元素標籤，是最基本的選擇器，這樣可以對h1標籤設定屬性。

選擇器有哪些？

　　常見的選擇器：元素選擇器，類選擇器，ID選擇器，屬性選擇器，派生選擇器。

　　本文的思路就是先講講最常用的選擇器，再講講用得比較少的選擇器。

　　如果你覺得能學到不少知識，點個關注哦，精彩美文第一時間為你奉上。

選擇器-元素選擇器

　　元素選擇器，最常用的選擇器之一，常用於html標籤，p標籤，h1-h6標籤等的樣式設定。具體怎麼用就不詳細介紹了，

上面開頭已經舉例說明了。在 W3C 標準中，元素選擇器又稱為型別選擇器（type selector）。“型別選擇器匹配文件語言

元素型別的名稱。型別選擇器匹配文件樹中該元素型別的每一個例項。”

選擇器-類選擇器
　　類選擇器與元素選擇器看起來很類似，但是還是有一些區別。類選擇器允許以一種獨立於文件元素的方式來指定樣式。

該選擇器可以單獨使用，也可以與其他元素結合使用。
提示：只有適當地標記文件後才能使用這些選擇器，所以使用這種選擇器通常需要先做一些構想和計劃。要應用樣式而不考

慮具體設計的元素，最常用的方法就是使用類選擇器。類選擇器怎麼用，如下圖：

　　圖中的body標籤裡面，有一個div，div有一個class屬性，這就是所謂的類，但是這個類不同於java語言的類。然後我們

需要對這個div設定一些樣式，看style裡面，.select這個就是類選擇器了，類選擇器需要配合標籤的class屬性一起使用。
類選擇器可以結合元素選擇器來使用。這種選擇器稱為結合元素選擇器。

　　這裡就將與類選擇器相關的選擇器詳細介紹一下。
　　例如：

　　選擇器會匹配class屬性包含select的所有p標籤，所以選擇器p.select解釋為：“其class屬性值為select的所有段落”。
　　還有一個多類選擇器。怎麼用呢？看下面

　　具體是什麼意思呢？就是說：本來我的一個select的樣式是夠用的，但是突然加了需求，需要再加一個字型的大小，

但是隻想P標籤使用，並且select又不是一個標籤在使用，waring也不是隻有一個P標籤使用，這時候，多類選擇器就出

現了，其實標籤的style屬性也可以，但是不推薦這麼幹。使用多類選擇器之後，這個標籤就同時結合了這兩個選擇器裡

面的樣式屬性。class裡面的類的先後順序沒關係。

選擇器-ID選擇器

　　在某些方面，ID選擇器類似於類選擇器，但是也有一些重要的區別。語法：類選擇器是在名稱前面加一個.   ID選擇

器在前面加上一個#
　　用法：類選擇器可以多次使用，ID選擇器只能使用在一個元素標籤上面，並且只能使用一次，不能重複使用（在一個

文件裡面），原因是在一個文件裡面，ID是唯一的。

　　示例：

　　這樣就為ID為test的標籤h1設定了字型顏色屬性
　　注意事項：

1. ID選擇器在一個文件中只能使用一次
2. 不能使用ID詞列表（意思是不能使用類選擇器那樣的結合，因為id屬性不允許有一空格分隔的詞列表）
3. 一般情況下ID選擇器與類選擇器都是區分大小寫的。

選擇器-屬性選擇器

　　屬性選擇器相對上面兩種選擇器來說用得比較少，也很簡單，來看看吧。

　　屬性選擇器可以根據元素的屬性以及屬性值來選擇元素。

• 簡單屬性選擇
  如果希望選擇有某個屬性的的元素，而不論屬性值是什麼，可以使用簡單屬性選擇器

  如：

   

　　意思就是說將所有帶有href屬性的元素設定字型屬性為“微軟雅黑”

*{ 
     font-size:12px; 
 }

　　這是萬用字元選擇器，css系列第一篇有說明！

　　示例中，*可以換成標籤名，如

　　意思是設定所有的name屬性的input標籤的字型大小為20px。

• 根據具體屬性值選擇

  除了選擇擁有某些屬性的元素外，還可以選擇某些擁有特定屬性值的元素。

  示例

　　　意思是選擇input標籤中，name屬性為username的input標籤，再為它設定樣式。

• 屬性與屬性值完全匹配

        屬性與屬性值完全匹配與上面的根據具體值屬性有什麼區別呢?還記得我們之前在類選擇器裡面講解的多類選擇器吧。

當我們要選擇這類標籤的時候，就需要屬性與屬性值完全匹配了，當然這只是一個示例。
        

　　這裡面，如果我們用這個選擇器來代替是否可行？

　　答案是不行的，這時候我們需要知道屬性與屬性值完全匹配了，看看下面

        這樣就可以精準的找到這個p標籤了，並且可以為他設定一些樣式，其實這樣看，你是不是覺得這個沒有什麼用？

其實這是有實際作用的，比如說在動態改變這個元素的樣式，是很方便的。

屬性選擇器這一塊還有一些需要了解的，但是不是很常用，這裡就只解釋一下怎麼個用法就行了。

選擇器-後代選擇器

　　　後代選擇器又稱為包含選擇器，後代選擇器可以選擇作為某元素後代的元素

• 根據上下文選擇元素

   

　　以上程式碼的意思是選擇test裡面的所有的p標籤，然後將他們的背景顏色改成紅色。是不是很簡單，效率高。

如果你一個一個的設定p標籤也是可以的，但是效率太低了，人工效率哈。

選擇器-子元素選擇器

　　子元素選擇器與後代選擇器相比，子元素選擇器只能選擇作為元素子元素的元素

　　這裡的程式碼，就只能將class為test裡面的子元素h1的背景變成紅色，class為test2，以及class為test1

裡面的都不是class為test的子元素，這一點要注意。

• 結合後代選擇器和子選擇器
  後代選擇器還可以與子選擇器共同使用

   

  這樣的效果是在h1下面的a標籤的下劃線會被取消掉

選擇器-相鄰兄弟選擇器

　　如果需要選擇緊接在另一個元素後的元素，而二者有相同的元素，可以使用相鄰兄弟選擇器。
　　示例：

　　這個選擇器讀作“選擇緊接在div1後面的h1標籤，並且是一個”，這個選擇器也一樣，可以和前面的子元素選擇器一起使用。
偽類css偽類是用於向某些選擇器新增特殊的效果。什麼意思呢？看看程式碼你就知道了。

　　這段程式碼是說當滑鼠移動到p標籤的時候，給p標籤新增一些樣式。類似的還有很多。

a:link {color: #FF0000}        /* 未訪問的連結 */
a:visited {color: #00FF00}    /* 已訪問的連結 */
a:hover {color: #FF00FF}    /* 滑鼠移動到連結上 */
a:active {color: #0000FF}    /* 選定的連結 */

        具體的用法視情況而定。

　　這期的選擇器筆記就到這裡了，如果你覺得不錯，請關注我哦！

　　●css3系列-2.css中常見的樣式屬性和值

　　●css3系列-1.css基礎知識入門

　　掃描二維碼 獲取更多精彩

點“在看”你懂得