CSS選擇器

1、class 和 id 的使用場景?

  • id：id選擇器，使用#name定義（name為id名，可任意取名），使用id="name"調用，其優先級高于類選擇器，一個標簽只能有一個id且每個id只能使用一次，多用于頁面分塊的塊級標簽上；
  • class：類選擇器，使用.name定義（name為類名，可任意取名），使用class="name"調用，一個標簽可以有多個類且同一個類可以用到不同的標簽上，多用于多個標簽樣式相似或完全相同時。

2、CSS選擇器常見的有幾種?

  1. 基礎選擇器
  1. 組合選擇器
  2. 屬性選擇器
  3. 偽類選擇器
  4. 偽元素選擇器

2.1、基礎選擇器

選擇器 定義
* 通用元素選擇器，匹配頁面任何元素
#id id選擇器，匹配特定的id的元素
.class 類選擇器，匹配class屬性中包含特定類的元素
element 標簽選擇器

2.2、組合選擇器

選擇器 定義
E,F 多元素選擇器，用,分隔，同時匹配元素E或元素F
E F 后代選擇器，用空格分隔，匹配E元素所有的后代元素F
E>F 子元素選擇器，匹配E元素的所有直接元素
E+F 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F
E~F 普通相鄰選擇器，匹配E元素之后的同級元素F(無論直接相鄰與否)

2.3、屬性選擇器

選擇器 定義
E[attr] 匹配所有具有屬性attr的元素
E[attr=value] 匹配屬性值為value的元素
E[attr~=value] 匹配所有屬性attr具有多個空格分隔，其中一個值等于value的元素
E[attr^=value] 匹配屬性attr的值以value開頭的元素
E[attr$=value] 匹配屬性attr的值以value結尾的元素
E[attr*=value] 匹配屬性attr的值包含value的元素

2.4、偽類選擇器

選擇器 定義
E:first-child 匹配元素E的第一個子元素
E:link 匹配素有未被點擊的鏈接
E:visited 匹配所有已經被點擊的鏈接
E:active 匹配鼠標已經在其上按下，但是還沒有釋放的E元素
E:hover 匹配鼠標懸停其上的E元素
E:focus 匹配獲得當前焦點的E元素
E:lang(c) 匹配lang屬性等于c的元素
E:enabled 匹配表單中可用的元素
Edisabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E:selection 匹配用戶當前選中的元素
E:root 匹配文檔的根元素，對于HTML文檔，就是HTML元素
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child 匹配其父元素的第n個子元素，第一個編號為1
E:nth-of-type(n) 與:nth-child作用類似，但是僅匹配使用同種標簽的元素
E:nth-last-of-type(n) 與nth-last-child作用相似，但是僅匹配使用同種標簽的元素
E:first-child 匹配父元素的第一個子元素
E:last-child 匹配父元素的最后一個子元素
E:first-of-type 即 E:nth-of-type(1)
E:last-of-type 即 E:nth-last-of-type(1)
E:only-child 匹配父元素下僅有的一個子元素
E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素

2.5、偽元素選擇器

選擇器 定義
E::first-line 匹配E元素內容的第一行
E::first-letter 匹配E元素內容的第一個字母
E::before 在E元素之前插入生成的內容
E::after 在E元素之后插入生成的內容

3、選擇器的優先級是怎樣的?對于復雜場景如何計算優先級?

3.1、選擇器的優先級（從高到低排列）

  1. 在屬性后面有!import的元素樣式
  1. 作為style寫在元素中的內聯樣式
  2. id選擇器
  3. 類選擇器
  4. 偽類選擇器
  5. 屬性選擇器
  6. 標簽選擇器
  7. 通配符選擇器
  8. 瀏覽器自定義

3.2、復雜場景計算優先級

  • 根據組合選擇器按照以下規則統計各類選擇器的個數：
    行內樣式 --> 統計值為a
    ID選擇器 --> 統計值為b
    類、屬性選擇器、偽類選擇器 --> 統計為c
    標簽選擇器、偽類選擇器 --> 統計為d
  • 先比較a值的大小，a值大的則優先級高;如果a值相等，則再比較b值的大小，b值大的優先級高；如果b值相等，則比較c值的大小，c值大的優先級高；如果c值相等，則比較d值的大小，d值大的優先級。

4、a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？

4.1、順序如下：

  <style type="text/css">
    a:link {
      color: red;
    }
    a:visited {
      color: black;
    }
    a:hover {
      color: blue;
    }
    a:active {
      color: green;
    }

4.2、原因

  • 當鼠標移動到a標簽上，此時與標簽顏色相關的選擇器有：a:link,a:visited,a:hover,這三個選擇器擁有相同的優先級，但是被寫在最后的選擇器會覆蓋掉之前的選擇器，因此要想實現“當鼠標移動到a標簽上變換顏色”的效果，需要將a:hover置于 a:link 和 a:visited 之后。
  • 當鼠標點擊a標簽，此時與標簽顏色相關的選擇器有：a:link,a:visited,a:hover和a:active，這四個選擇器擁有相同的優先級，但是被寫在最后的選擇器會覆蓋掉之前的選擇器，因此要想實現“當鼠標點擊a標簽時變換顏色”的效果，需要將a:active置于a:link,a:visited,a:hover 之后。

5、以下選擇器分別是什么意思?

#header{
} // 選中id為header的元素
.header{
} // 選中class為header的元素
.header .logo{
} // 選中class為header的元素的后代元素中，class為logo的元素
.header.mobile{
} // 選中class元素中同時具有header和mobile的元素
.header p, .header h3{
} // 同時選中class為header的元素的后代p元素和后代h3元素
#header .nav>li{
} // 選中id為header的元素的后代元素中，class為nav元素下所有直接標簽為li的子元素
#header a:hover{
} // 選中id為header的元素的后代元素中，在hover狀態下的a元素
#header .logo~p{
} // 選中id為header的元素的后代元素中，class為logo元素的后面所有同級標簽為p的元素
#header input[type="text"]{
} // 選中id為header的元素的后代元素中，input所有屬性為type="text"的input元素

6、列出你知道的偽類選擇器

選擇器 定義
E:first-child 匹配元素E的第一個子元素
E:link 匹配素有未被點擊的鏈接
E:visited 匹配所有已經被點擊的鏈接
E:active 匹配鼠標已經在其上按下，但是還沒有釋放的E元素
E:hover 匹配鼠標懸停其上的E元素
E:focus 匹配獲得當前焦點的E元素
E:lang(c) 匹配lang屬性等于c的元素
E:enabled 匹配表單中可用的元素
Edisabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E:selection 匹配用戶當前選中的元素
E:root 匹配文檔的根元素，對于HTML文檔，就是HTML元素
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child 匹配其父元素的第n個子元素，第一個編號為1
E:nth-of-type(n) 與:nth-child作用類似，但是僅匹配使用同種標簽的元素
E:nth-last-of-type(n) 與nth-last-child作用相似，但是僅匹配使用同種標簽的元素
E:first-child 匹配父元素的第一個子元素
E:last-child 匹配父元素的最后一個子元素
E:first-of-type 即 E:nth-of-type(1)
E:last-of-type 即 E:nth-last-of-type(1)
E:only-child 匹配父元素下僅有的一個子元素
E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素

7、div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 （注意空格的作用）

  • div:first-child 屬于其父元素的第一個子元素而且是div的元素
  • div: first-of-style 屬于其父元素所有子元素中首個div元素
  • div :first-child是選擇所有div元素內所有元素中屬于其父元素的首個子元素
  • div :first-of-type 是選擇所有div元素內所有元素中屬于其父元素的首個該類型的子元素

8、運行如下代碼，解析下輸出樣式的原因。

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>
Paste_Image.png
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 其實平時用得多的選擇器無非也就是那么幾個，時間久了，許多不常用的選擇器就慢慢忘記了。為了不讓自己忘記這些選擇器，今...
    盛夏晚清風閱讀 1,874評論 0贊 5
  • 1.class 和 id 的使用場景? class：類選擇器，一個標簽可以有多個類且同一個類可以用到不同的標簽上，...
    饑人谷_兔子君閱讀 1,213評論 0贊 0
  • 1.CSS 元素選擇器 最常見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。如果設置 H...
    饑人谷_小侯閱讀 885評論 0贊 1
  • 一，class 和 id 的使用場景? id選擇器，匹配特定id的元素。class是類選擇器，匹配class包含（...
    DeeJay_Y閱讀 381評論 0贊 0
  • 1、class 和 id 的使用場景? id：指定標簽的唯一標識id選擇器，使用#name定義（name為id名，...
    zh_yang閱讀 473評論 0贊 1