面試之CSS選擇器？看這一篇就夠了

時間  2021-08-14
標籤 css html 面試 瀏覽器 markdown app 學習 url spa 欄目 快樂工作 简体版
原文   原文鏈接

前言

這段時間在整理跟面試題相關的知識點，進行查缺補漏，而後本身對於CSS選擇器這部分知識點只是有一些瞭解，因此此次專門梳理一下CSS選擇器的知識點。下面咱們就從面試官常問的幾個問題開始入手css

第一問：CSS選擇器是什麼

咱們寫頁面的時候都知道，HTML頁面的屬性的各類樣式是經過CSS來實現的。要使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就須要用到CSS選擇器。 HTML頁面中的元素就是經過CSS選擇器進行控制的。html

一個完整css屬性選擇器是由css命名及後面屬性及屬性值構成，{}前的部分是選擇器，以下面的.head，{}內的部分是樣式,如color:#fff。面試

.head {
  color:#fff
}
複製代碼

第二問：CSS選擇器有哪些

CSS中有五大選擇器，分別是通配符選擇器，元素/標籤選擇器，類選擇器，ID選擇器，屬性選擇器瀏覽器

一.通配符選擇器

實際上，通配符選擇器咱們在開中常常會使用到，它同一個 * 表示，使用 * 做爲選擇器時，它能與 HTML 中全部元素進行匹配，好比下面咱們常在頁面中設置的通配符選擇器markdown

* {
  margin:0;
  padding:0;
}
複製代碼

上面這個選擇器就是將瀏覽器中對全部元素自帶的 margin 值和 padding 值所有設置爲0app

通配符選擇器也能夠用於選擇某個元素下的全部元素,下面代碼就是選中div的head類下全部元素，設置這些元素的背景色爲紅色學習

<style>
    div.head * {
      color: red;
    }
</style>
<div class="head"> <p>我是 通配符 1號</p> <p>我是 通配符 2號</p> </div>
複製代碼

image.png

二.元素選擇器

元素選擇器幾乎是咱們最經常使用的選擇器了，在HTML文檔中該選擇器一般是指某種HTML元素ui

h3 {
    color:blue;
}
<h3>我是元素選擇器</h3>
複製代碼

image.png

上面代碼是選中全部 span 元素，將它們的內容顏色設置爲藍色，相似的還有不少，例如：p,h2,a,div乃至html。url

三.類選擇器

類選擇器分爲兩種，單類選擇器和多類選擇器spa

單類選擇器

使用元素選擇器直接對元素進行操做可能還不夠精細，這時咱們可使用類選擇器直接對元素中的類進行樣式設置。單類選擇器的使用方法是元素名後加上 .類名，好比下面

h3.one {
  color:yellow;
}
<h3 class="one">我是單類選擇器</h3>
複製代碼

當前綴的類名長的時候，咱們也能夠省略，直接用類名進行選擇

.one {
  color:yellow;
}
<h3 class="one">我是單類選擇器的省略</h3>
複製代碼

image.png

多類選擇器

實踐開發中，元素中的類名可能不是一個單詞，而是一長串單詞，各個單詞之間用空格分開。在解釋多類選擇器之間咱們先認識一下單類選擇器會出現的一種狀況。

當你的類名包含兩個或以上的單詞時，假設爲 class="first study"， 這時使用兩個單類選擇器 .first { color="white" } .study { font-size:10px } ,這兩個單類選擇器會根據類選擇器名對類名存在的單詞進行檢索，這裏兩個單類選擇器都成功檢索，因此最後的內容會將這兩種樣式都呈現出來。

如今，咱們來看看多類選擇器 看下面狀況,當咱們想直接對第三條 p 標籤進行樣式設置時，能夠設置兩個類名的限制條件，即 .first.study ，類名只要擁有這兩個單詞就能使用樣式，這與單詞順序無關，由於寫成 .study.first 效果也是同樣的。咱們能夠將元素選擇器與多類選擇器結合使用，在多類選擇器前加上元素名就能夠匹配指定元素的指定類名，好比 h4.first.study

.first {
  color:blue
}
.study {
  color:green
}
.first.study {
  color:pink
}
<h4 class="first">我是多類選擇器1</h4>
<h4 class="study">我是多類選擇器2</h4p>
<h4 class="first study">我是多類選擇器3</h4>
複製代碼

image.png

四.ID 選擇器

只從代碼中看，或許咱們會以爲ID選擇器與類選擇器有些相似，那麼爲何咱們有了類選擇器還須要ID選擇器呢？咱們先從類和ID的區別來看一下，一個元素能夠擁有多個類，卻只能有一個惟一ID，一個ID值在整個HTML中只能設置一次，不能重複設置和出現，因此ID值也是一個元素的惟一值（注意，不是一類元素，而是一個元素的惟一值），咱們想要對同元素名同類名的幾個元素進行不一樣的操做時，就須要使用到 ID選擇器了

ID選擇器的寫法是 # + ID值

#one {
  color:blue
}
#two {
  color:yellow
}
#three {
  color:red
}
<h5 class="first" id="one">我是ID選擇器1</h5>
<h5 class="first" id="two">我是ID選擇器2</h5>
<h5 class="first" id="three">我是ID選擇器3</h5>
複製代碼

image.png

從圖中能夠看出，咱們用ID選擇器實現了對同元素名同類名的幾個元素的不一樣顏色的設置

五.屬性選擇器

屬性選擇器可讓咱們直接對元素中的屬性進行選中而後根據條件對該元素進行屬性設置

1.簡單屬性選擇器

根據一個元素中的具體屬性進行選擇，使用方法： 元素名[屬性名] 或 *[屬性名]， 下面給出一個例子，選擇含有href屬性的全部h2標籤

a[href] {
  color:red
}
<a href="">www.baidu.com</a>
複製代碼

與多類選擇器同理，咱們也能夠設置多個屬性選擇條件，如 a[href][title]

a[href][title] {
  color:red
}
<a href="" title="">www.baidu.com</a>
複製代碼

image.png

2.具體屬性值選擇器

若是咱們相對屬性進行更加精確的選擇，那麼你能夠試試這個 <a href="www.baidu.com">www.baidu.com</a> 這裏須要注意一點，選擇器對於具體屬性的值是進行順序檢索的，實質上是進行子符串匹配，因此咱們不能用非順序的屬性值進行選擇，好比 a[href=".baidu.comwww"] 就沒法匹配到。具體屬性值一樣能夠設置多個匹配條件 例如：a[href="www.baidu.com"][title="0000"] ,選擇href屬性爲www.baidu.com，title屬性爲0000的元素

3.部分屬性值選擇器

如你所見，使用具體屬性匹配會讓選擇變得繁瑣且多餘，由於對元素進行如此精細的匹配，我爲何不考慮 ID選擇呢？ 事實上，咱們處理的更多的狀況每每是選擇在一串屬性值中出現了某個關鍵字的元素，例如，咱們須要選擇全部屬性名中包含了second的 h1 元素 h1[class~=second] , ~ 表示包含後面的字符串匹配

h1[class~=second] {
  color:pink
}
<h1 class="second 1">我是部分屬性值選擇器1</h1>
<h1 class="second 2">我是部分屬性值選擇器2</h1>
<h1 class="second 3">我是部分屬性值選擇器3</h1>
複製代碼

image.png

小擴展：當你對class這個屬性選擇時，你會發現使用類選擇器 .second 實現的效果也能夠達到上面的效果

上述代碼中，咱們寫class類名時進行了空格，只有這樣才能進行部分屬性值匹配， class="second1 與 class="second-1 都沒法進行匹配，對於後者的狀況，咱們可使用子串匹配屬性選擇器

  • h2.class^="second" ,匹配以屬性值second爲開頭的h2元素
  • h2.class$="second" ,匹配以屬性值second爲結尾的h2元素
  • h2.class*="second" ,匹配包含屬性值second的h2元素
h2[class^=second] {
  color:pink
}
h2[class$=second] {
  color:pink
}
h2[class*=second] {
  color:pink
}
<h2 class="second-1">我是部分屬性值選擇器3</h2>
<h2 class="2-second">我是部分屬性值選擇器4</h2>
<h2 class="1-second-2">我是部分屬性值選擇器5</h2>
複製代碼

image.png 部分屬性選擇器的功能是十分強大的，甚至，甚至只要咱們想的話，h2.class*="s"， 就能夠完成對全部屬性值爲 second 的選擇

補充

合併選擇

當兩個選擇器的樣式相同時，咱們能夠將這兩個選擇器合併

<style type="text/css"> 

p, div { ... }  <!-- 若是 p & div 設置的樣式相同，能夠合併在一塊兒設置 -->

</style>

<p> p ~ <p>
<div> div ~ </div>
複製代碼

子選擇器

咱們想要選中某元素下面的子類時，能夠用 > 進行選中，可是注意，子選擇器只能選擇本身的子類，第二級元素，而不能選擇第二級別如下的元素。

p > strong {
 color: greenyellow;  <!-- p 下面的 strong 顏色爲 淺綠色 -->
}

<p>
 <strong>簡明教程</strong>
</p>
複製代碼

後代選擇器

後代選擇器可以選定元素內部好幾級如下的元素，只要是元素下面的元素，不管幾級，都能選定。這也是它與子類選擇器的區別，後代選擇器能夠選擇多級元素，子類選擇器只能選擇二級元素

div p {
 <!-- 選擇 p 元素成功-->
}

div strong {
 <!-- 選擇 strong 元素成功-->
}

<div>
 <p><strong>後代選擇器</strong></p>
</div>

複製代碼

子類過濾器

若是咱們使用子類選擇器時，想對子元素進行精確選擇的話，可使用子類過濾器，根據條件對子類元素進行過濾

<style type="text/css"> 

p:first-child { ... } <!-- 選擇第一個 p -->
p:nth-child(2) { ... } <!-- 指定選擇第幾個 p -->
p:last-child { ... } <!-- 選擇最後一個 p -->

</style>

<p> p1 ~ </p>
<p> p2 ~ </p>
<p> p3 ~ </p>
複製代碼

僞類選擇器

僞類選擇器：同一個標籤，咱們想實現不一樣狀態讓它顯示出不同的樣式時，就可使用到它，最多見的在於超連接狀態的使用。好比div是屬於box類，這一點很明確，就是屬於box類。可是a屬於什麼類？不明確。由於須要看用戶點擊前是什麼狀態，點擊後是什麼狀態。因此，就叫作「僞類」。

僞類又分爲靜態僞類和動態僞類

靜態僞類

靜態僞類只能用於超連接的樣式

  • :link 超連接點擊以前

  • :visited 連接被訪問過以後

動態僞類

動態僞類對於全部標籤都適用

  • :hover 「懸停」：鼠標放到標籤上的時候
  • :active 「激活」： 鼠標點擊標籤，可是不鬆手時。
  • :focus 是某個標籤得到焦點時的樣式（好比某個輸入框得到焦點）

超連接的四種狀態

a標籤有4種僞類（即對應四種狀態），這四種狀態必需要求按順序排放。以下：

  • :link 「連接」：超連接點擊以前
  • :visited 「訪問過的」：連接被訪問過以後
  • :hover 「懸停」：鼠標放到標籤上的時候
  • :active 「激活」： 鼠標點擊標籤，可是不鬆手時。
/*讓超連接點擊以前是黃色*/
		a:link{
			color:yellow;
		}

		/*讓超連接點擊以後是藍色*/
		a:visited{
			color:blue;
		}
		/*鼠標懸停，放到標籤上的時候*/
		a:hover{
			color:pink;
		}
		/*鼠標點擊連接，可是不鬆手的時候*/
		a:active{
			color:black;
複製代碼

下面是示例用到的代碼

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.head * {
      color: red;
    }

    h3 {
      color: blue;
    }

    h3.one {
      color: yellow;
    }

    .second {
      color: burlywood;
    }

    .first {
      color: blue
    }

    .study {
      color: green
    }

    .first.study {
      color: pink
    }

    #one {
      color: blue
    }

    #two {
      color: yellow
    }

    #three {
      color: red
    }

    a[href] {
      color: red
    }

    a[href="www.baidu.com"] {
      color: black
    }

    h1[class~="second"] {
      color:pink
    }
    h2[class^="second"] {
      color:pink
    }
    h2[class$="second"] {
      color:pink
    }
    h2[class*="second"] {
      color:pink
    }
    
  </style>
</head>

<body>
  <div class="head">
    <p>我是 head 1號</p>
    <p>我是 head 2號</p>
  </div>
  <hr>

  <div>
    <h3>我是元素選擇器</h3>
  </div>
  <hr>

  <div>
    <h3 class="one">我是單類選擇器</h3>
    <h3 class="second">我是單類選擇器的省略</h3>
  </div>
  <hr>

  <div>
    <h4 class="first">我是多類選擇器1</h4>
    <h4 class="study">我是多類選擇器2</h4>
    <h4 class="first study">我是多類選擇器3</h4>
  </div>
  <hr>

  <div>
    <h5 class="first" id="one">我是ID選擇器1</h5>
    <h5 class="first" id="two">我是ID選擇器2</h5>
    <h5 class="first" id="three">我是ID選擇器3</h5>
  </div>
  <hr>

  <div>
    <a href="" title="">www.baidu.com</a>  <br>
    <a href="www.baidu.com">www.baidu.com</a>
  </div>
  <hr>

  <div>
    <h1 class="second 1">我是部分屬性值選擇器1</h1>
    <h1 class="second 2">我是部分屬性值選擇器2</h1>
    <h1 class="second 3">我是部分屬性值選擇器3</h1>
  </div>
  <hr>

  <div>
    <h2 class="second-1">我是部分屬性值選擇器3</h2>
    <h2 class="2-second">我是部分屬性值選擇器4</h2>
    <h2 class="1-second-2">我是部分屬性值選擇器5</h2>
  </div>
</body>

</html>
複製代碼

以上，就是各類選擇器的認識和了解，下面咱們要開始介紹重頭戲也是面試官常問的考點——選擇器的優先級了

第三問：選擇器的優先級是怎樣的？它們是怎麼進行計算的？

選擇器優先級的認識

咱們在上面聊到了，CSS選擇器包括行內樣式、id選擇器、class選擇器、標籤選擇器。上面幾種選擇器的優先級優先級依次下降，另外，在選擇器中使用!important 可以讓選擇器的優先級提高。 爲何咱們要對選擇器引入優先級的概念？試想一下，若是咱們對一個P標籤的ID選擇器設置了紅色，對它的類選擇器設置了黃色，對它的元素選擇器設置了藍色，那麼P標籤的顏色不是要打架嗎，因此咱們須要對選擇器進行優先級的設置，哪一個優先級更高，就執行哪一個選擇器。

爲了給選擇器進行優先級比較，咱們對每種選擇器都分配了權重

  • !impotant 權重爲正無窮
  • 行內樣式 權重爲 1000
  • ID選擇器 權重爲 100
  • 類選擇器/僞類選擇器/屬性選擇器 權重爲 10
  • 標籤選擇器 權重爲 1
  • 通配符選擇器/子類選擇器/兄弟選擇器 權重爲 0
  • 繼承的樣式沒有權重

總結：總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

選擇器的比較規則

  1. 權重大的選擇器優先於權重小的選擇器
  2. 權重能夠進行疊加，如一個main類與一個P標籤： .main p {} 這裏選擇器的權重爲11
  3. 權重相同時，選擇後面的選擇器，將前面的樣式進行覆蓋
  4. 通配符、子選擇器、兄弟選擇器的權重爲 0000，可是它們的權重高於繼承樣式的權重

下面給出一個例子來更加形象的分析選擇器的權重

例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {     /* 0  */
      margin: 0;
      padding: 0;
    }
    .container {   /* 類選擇器 10 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    #study {       /* ID選擇器 100 */
      color: black;
    }
    .head {           /* 類選擇器 10 */
      color: blue;
    }
    p {           /* 元素選擇器 1 */
      color: violet;
    }
   
    .head p {       /* 類選擇器 10 + 元素選擇器 1 = 11 */
      color: orangered;
    }
    .head p[class="one"] {   /* 類選擇器 10 + 屬性選擇器 10 = 20 */
      color: saddlebrown;
    }
    div.head p[class="two"] { /* 元素選擇器 1 + 類選擇器 10 + 屬性選擇器 10 = 21 */
      color: rgb(47, 218, 123);
    }
    div.head p[class="three"] { /* 元素選擇器 1 + 類選擇器 10 + 屬性選擇器 10 = 21 */
      color: rgb(87, 112, 126);
    }
    div.head p[class="four"] { /* 元素選擇器 1 + 類選擇器 10 + 屬性選擇器 10 = 21 */
      color: rgb(176, 45, 180);
    }
    .five {   /* !important 無窮大 */
      color: rgb(82, 162, 228) !important;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="head" id="top">
      <p style="font-size: 20px; color: rgb(9, 87, 48);" id="study">我要開始學習啦！</p>
      <p class="one">週一打王者</p>
      <p class="two">週二打LOL</p>
      <p class="three">週三打吃雞</p>
      <p class="four">週四打原神</p>
      <p class="five">週五打陰陽師</p>
      <p>週末steam全家桶</p>
    </div>
  </div>
</body>
</html>
複製代碼

image.png

分析

咱們從上面能夠看出

我要開始學習啦！

它的顏色，被 #study，.head ， p ， .head p 等選擇器以及行內樣式所選中，因爲行內樣式的權重爲1000，是這裏面最高的，因此執行行內樣式的顏色

週一打王者

它的顏色，被 #study， .head ， p ， .head p ， .head p[class="one"] 這些選擇器所選中，因爲 .head p[class="one"] 的權重爲20，爲最高，執行它的樣式。

其餘元素同理

補充：不一樣選擇器之間存在不可逾越的鴻溝，即，11個標籤選擇器的權重也小於1個類選擇器

小結

以上，就是CSS選擇器的優先級比較啦，這篇文章大致梳理了什麼是CSS選擇器，CSS的各類選擇器以及各類選擇器之間的優先級比較，經過對CSS選擇器的初步認識一步一步的深刻優先級比較，幫助你更好的認識CSS選擇器，若是以爲對你有所幫助的話歡迎點贊，固然，因爲本人水平有限，可能文章還存在很多紕漏，但願發現問題的小夥伴能夠在評論區指出

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程