深刻解析 CSS 選擇器

時間  2021-04-22
標籤 css html 前端 css3 瀏覽器 緩存 post 性能 spa 欄目 CSS 简体版
原文   原文鏈接

這是第 97 篇不摻水的原創，想獲取更多原創好文，請搜索公衆號關注咱們吧~ 本文首發於政採雲前端博客： 深刻解析 CSS 選擇器

1、前言

​ CSS 選擇器對 HTML 頁面中的元素實現一對一，一對多或者多對一的控制，從而給指定元素添加樣式。同時還要考慮一個元素被賦予多個樣式時如何生效的問題，這個就和選擇器優先級相關了。css

​ 優先級是基於不一樣種類選擇器組成的匹配規則。瀏覽器經過優先級來判斷哪些樣式與一個元素最爲相關，從而在該元素上應用這些樣式。html

2、CSS 選擇器的分類

3、不一樣種類選擇器的用法

​ 接下來咱們看一看基本選擇器以外的其餘選擇器。前端

屬性選擇器

（經過已經存在的屬性名或屬性值匹配元素）css3

<style>
    div {  margin-top: 20px;}
    /* 帶有屬性 title 的元素 */
    [title]{  background: #faf3e0; }
    /* 帶有屬性 class 且值爲 div1 的元素 */
    [class=div1]{ background: #eabf9f;  }
    /* 帶有屬性 attr 而且該屬性是一個以空格做爲分隔的值列表，其中至少有一個值爲 attr-test2 的元素 */
    [attr~=attr-test2]{  background: #b68973; }
    /* 帶有屬性 attr 且值以 te 爲開頭的元素 */
    [attr^=te]{ background: #f39189; }
    /* 帶有屬性 attr 且值以 Test 爲結尾的元素 */
    [attr$=Test]{ background: #bb8082; }
    /* 帶有屬性 attr 且值包含 test3 的元素 */
    [attr*=test3]{ background: #6e7582; }
    /* 帶有屬性 attr 且值爲 attr1 或以 attr1- 開頭 */
    [attr|=attr1]{ background: #046582; }
    /* 屬性選擇器默認區分大小寫，在屬性選擇器的右方括號前添加一個用空格隔開的字母 i（或 I），可忽略大小寫 */
    [attr*=test5 i]{ background: #865858; }
</style>
<body>
  <div title='helloWorld'>[title]</div>
  <div class="div1">[class=div1]</div>
  <div attr='attr-test1 attr-test2'>[attr~=attr-test2]</div>
  <div attr='test'>[attr^=te]</div>
  <div attr='attrTest'>[attr$=Test]</div>
  <div attr='attr-test3'>[attr*=test3]</div>
  <div attr='attr1-test4'>[attr|=attr1]</div>
  <div attr='attr-Test5'>attr*=test5 i</div>
</body>

僞類選擇器

  • 動態僞類（多用於超連接的樣式）瀏覽器

    <style>
  /* 未訪問的連接 */
  a:link { color: #11698e; }
  /* 已訪問過的連接  注:只要是當前瀏覽器有訪問記錄的都算做已訪問的狀態 */
  a:visited {color: #9fb8ad; }
  /* 當鼠標懸浮在元素上方時 */ 
  /* 注: 爲了使點擊事後的連接仍然受設置的僞類樣式影響，在CSS 定義時 :hover 需設置在 :link 和 :visited 以後 */
  a:hover{ color: #383e56; }
  /* 被激活的元素 (鼠標點下且爲鬆開時) */ 
  /* 注: 爲了使點擊事後的連接仍然受設置的僞類樣式影響，在CSS 定義時 :active 需設置在 :hover 以後 */
  a:active{ color: #fb743e; }
</style>
<body>
    <a target="_blank" href='https://juejin.cn/user/3456520257288974'>超連接</a>
</body>

注：僞類 active 在 IOS 系統下存在兼容問題，具體解決辦法可參考 IOS 僞類 active 兼容問題緩存

  • 目標僞類、否認僞類、語言僞類post

    <style>
    html { font-size: 14px; }
    /* 目標僞類 :target: 表明一個惟一的頁面元素(目標元素)，其 id 與當前URL片斷匹配 */
    div:target { color: #f05454; }
    /* 否認僞類 :not   注: 僅 Chrome、Firefox 和 Safari 高版本瀏覽器適用*/
    p:not(#p1){ color: #e27802; }
    /* 語言僞類 :lang */
    div:lang(zh) { color: #ffc1b6; }
</style>
<body>
    <h3>目標僞類 :target</h3>
    <div id="div1">目標僞類: 這是 div1</div>
    <div id="div2">目標僞類: 這是 div2</div>
    <h3>否認僞類 :not</h3>
    <p id="p1">否認僞類: 這是 p1</p>
    <p id="p2">否認僞類: 這是 p2</p>
    <h3>語言僞類 :lang</h3>
    <div lang="en">語言僞類: 這是 en</div>
    <div lang="zh">語言僞類: 這是 zh</div>
</body>

  • 結構僞類性能

    <style>
    /* 父元素的第一個子元素且該子元素爲 p 的元素 */
    p:first-child { background: #046582; }
    /* 父元素中第一個 span 元素 */
    span:first-of-type { background: #6e7582; }
    /* 父元素中第 2n 個子元素且爲 p 的元素 */
    p:nth-child(2n) { background: #bb8082; }
    /* 父元素中第 2n 個 span 元素 */
    span:nth-of-type(2n) { background: #f39189; }
    /* 父元素有且僅有一個爲 i 的元素 */
    i:only-child { background: #865858; }
    /* 父元素有且僅有一個爲 i 的元素 */
    strong:only-of-type { background: #8e7f7f; }
    /* 沒有子元素的元素 */
    p:empty { height: 16px; background: #bbb; }
    /* 根元素   HTML 中至關於 <html> */
    :root { background: #e2d5d5; color: #fff; }
</style>
<body>
    <div>
        <p class="p1">這是 p1</p>
        <p class="p2">這是 p2</p>
        <p class="p3"><i>這是 p3</i></p>
        <p class="p4">這是 p4</p>
        <span class="span1">這是 span1</span>
        <span class="span2">這是 span2</span>
        <p class="empty-p p5">這是 p5</p>
        <strong>這是 strong</strong>
    </div>
</body>

  • UI 元素僞類ui

    <style>
   /* :enabled 可用狀態 */
   input[type="radio"]:enabled {  box-shadow: 0 0 0 3px #7c9473; }
   /* :disabled 禁用狀態 */
   input[type="radio"]:disabled {  box-shadow: 0 0 0 3px #cfdac8;  cursor: not-allowed; }
   /* :checked radio 或 checkbox 表單被勾選狀態 */
   /* 注意書寫順序，選擇元素相同時 :checked 應寫在 :enabled/:disabled 後面 */
   input[type="radio"]:checked {  box-shadow: 0 0 0 3px #c0e218 ; }
   /* :default 表示一組相關元素中的默認(選中)表單元素   此處 :default 應用於默認設置了 checked 的 radio 表單上 */
   /* 該選擇器能夠在 <button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用 */
    input[type="radio"]:default {  box-shadow: 0 0 0 3px #86aba1;}
   /* :read-only 只讀狀態 */
   input:read-write { background: #7c9473; }
   /* :read-only 只讀狀態 */
   input:read-only { background: #cfdac8; }
</style>
<body>
    <div>
        <input type="radio" name="my-radio" id="radio1" checked> 
        <label for="radio1">默認選中</label>
        <input type="radio" name="my-radio" id="radio2"> 
        <label for="radio2">未選中-可用</label>
        <input type="radio" name="my-radio" id="radio1" disabled>
        <label for="radio1">未選中-禁用</label>
    </div>
    <div>
        <input type="input" name="my-input" id="input1" value="input1">
        <input type="input" name="my-input" id="input2" value="input2" readonly>
    </div>
</body>

僞元素選擇器

<style>
    div { margin-left: 50px;}
    /* ::after 在選中元素的最後添加一個子元素，默認爲行內元素 (替換元素上不生效) */
    .div1::after { content: 'div1 的 after'; margin-left: 10px; color: #ef4f4f }
    /* ::before 在選中元素的第一個位置添加一個子元素 (其餘用法同 ::after) */
    .div2::before { content: 'div2 的 before'; margin-right: 10px; color: #ee9595 }
    /* ::first-letter 匹配選中塊級元素的第一行的第一個字符 */
    .div3::first-letter { color: #ff4646 }
    /* ::first-line 匹配選中塊級元素的第一行 */
    .div4::first-line { color:  #9dab86 }
    /* ::marker 匹配選中有序或無序列表的序號或符號 */
    .div5 ul li::marker { color: #fdb827 }
    /* ::selection 匹配元素中被選中高亮的部分 */
    .div6::selection { background: #9dab86; color: white }
</style>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div class="div4">div4第一行<br>div4第二行</div>
    <div class="div5">div5
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
    </div>
    <div class="div6">div6</div>
</body>

  • 一個選擇器中只能使用一個僞元素

  • CSS3 中僞元素應該用雙冒號，以便區分僞元素和僞類。可是舊版的規範未作明確區分，因此大多數瀏覽器中支持部分僞元素使用單雙冒號兩種寫法spa

    組合選擇器

<style>
    /* 後代選擇器  空格隔開   匹配全部符合的後代元素*/
    div span { margin-left: 10px; background: #ff8585  }
    /* 直接子後代選擇器  > 鏈接; 匹配符合的直接子元素; 不包括子元素的子元素 */
    .div1>span { color: #6155a6 }
    /* 羣組選擇器  逗號隔開 */
    .div1, .div2 { color: #a7c5eb }
    /* 相鄰兄弟元素選擇器  + 鏈接; 匹配某元素後緊鄰的兄弟元素 */
    .div3 + div { color: #fd3a69 }
    /* 兄弟選擇器   ~ 鏈接; 匹配某元素後全部同級的指定元素，強調的是全部的 */
    .div5 ~ div {  color: #008891 ; }
</style>
<body>
    <div class="div1">div1
      <span class="span1">span1
          <span class="span1-1">span1-1</span>
      </span>
    </div>
    <div class="div2">div2<span class="span2">span2</span></div>
    <div class="div3">div3<span class="span3">span3</span></div>
    <div class="div4">div4<span class="span4">span4</span></div>
    <div class="div5">div5<span class="span5">span5</span></div>
    <div class="div6">div6<span class="span6">span6</span></div>
    <div class="div7">div7<span class="span7">span7</span></div>
    <div class="div8">div8<span class="span8">span8</span></div>
</body>

4、CSS 選擇器優先級

​ 基本選擇器的優先級是：!important > 內聯 > ID選擇器 > 類選擇器 > 標籤選擇器 > 通用選擇器。那麼它如何計算的呢？有這樣一個計算表格

選擇器 示例 權重值
!impotant color: #fff !important; 正無窮
內聯選擇器 <div style='color: #fff'>樣式做用元素</div> 1 0 0 0
ID 選擇器 #id 1 0 0
類選擇器、屬性選擇器、僞類選擇器 .class 1 0
標籤選擇器、僞元素選擇器 div 1
通用選擇器 * 0
繼承屬性 <div style='color: #fff'><span>樣式做用元素</span></div> -1

假設在一個拍賣會上，有如下幾種籌碼：

* 一個`內聯樣式`至關於一千元
* 一個`ID 選擇器`至關於一百元
* 一個`類選擇器`至關於十元;
* 一個`標籤選擇器`至關於一元
* 通用選擇器爲零元

​ 每出現一個上述選擇器，就增長對應籌碼的錢數，最終採用出錢最多的樣式。可是，這裏的錢數計算方法和生活中的計算方法不同，這裏的"單位"不會由於值的累加而進行換算。 例如十個一百隻能是‘十百’，仍然小於一千。

基本選擇器

<style>
    * { color: #31326f } /* 通用 */
    div { background: #9ddfd3 } /* 標籤 */
    .div-class { background: #dbf6e9 } /* 類 */
    .p1, .p2, .p3 { background: #ffdada; color: #060930 } /* 類 */
    #p1-1 { background: #595b83 } /* id */
    .p3 { color: #595b83 !important } /* !important */
</style>
<body>
    <div class="div-class">
        <h1>Hello word!</h1>
        <p class="p1" id="p1-1">Hello word!</p>
        <p class="p2" style="color: white">Hello word!</p> <!-- 內聯樣式 -->
        <p class="p3" style="color: white">Hello word!</p> <!-- 內聯樣式 -->
    </div>
</body>

其餘選擇器

<style>
    div { color: #a20a0a }
    div .p1 ~ p { background: #fceef5; color: #ffa36c  } /* 總權重值: 12 */
    div p ~ p { background: pink; } /* 總權重值: 3 */
    .div-class .p1 ~ p { color: #799351 } /* 總權重值: 21 */
    /* 如下兩行樣式若互換位置，則 .p1 的 ::after 文本顏色爲 #333456 */
    .div-class p::after { content:'p-after'; margin-left: 10px; color: #333456 } /* 總權重值: 0 0 1 2 */
    div .p1::after { color: #42bfd8 } /* 總權重值: 12 */
    /* 如下兩行樣式若互換位置，則 .p1 的文本顏色爲 #92817a */
    .p1 { color: #92817a }
    [name="p1"] { color: #bedbbb } 
      /* 同一元素樣式存在衝突且同時存在 !important */
    div .span1 { color: #0e918c !important; }
    .span1 { color: #6a097d !important; }
</style>
<body>
    <div class="div-class">
        <h1>Hello word!</h1>
        <p class="p1" name="p1">p1</p>
        <p class="p2">p2</p>
        <p class="p3">p3</p>
        <span class="span1">span1</span>
    </div>
</body>

注：

  • 權重值相同時，寫在後面的樣式生效
  • !important 是 CSS 選擇器中的一個"流氓"屬性，不論選擇器的權重或者優先級的高低，只要加上 !important，那麼這個樣式的優先級就是最高的
  • 若是針對同一元素樣式存在衝突且同時存在 !important ，那麼選擇器總權重值高者生效

選擇器的權重值最高就必定會生效嗎？不必定哦~

<style>
    div { max-width: 100px; }
    div, p { background: #bedbbb }
    .div1 { width: 200px !important; }
    .p1 { width: 200px; }
</style>
<body>
    <div class="div1"> 這是 div1</div>
    <p class="p1"> 這是 p1</p>
</body>

注：對於一些互斥的樣式，例如 max-width 與 width，選擇器的權重值再高也是無能爲力的。

5、總結

​ 如你所見，CSS 選擇器也是暗藏玄機的哦。不過到目前爲止，暫時沒有可以經過元素選擇其父元素或其父元素相關元素的選擇器，這就讓人非常頭疼。

​ 若有問題，歡迎溝通與指正~

參考文章

推薦閱讀

經過自定義Vue指令實現前端曝光埋點

H5 頁面列表緩存方案

招賢納士

政採雲前端團隊（ZooTeam），一個年輕富有激情和創造力的前端團隊，隸屬於政採雲產品研發部，Base 在風景如畫的杭州。團隊現有 40 餘個前端小夥伴，平均年齡 27 歲，近 3 成是全棧工程師，妥妥的青年風暴團。成員構成既有來自於阿里、網易的「老」兵，也有浙大、中科大、杭電等校的應屆新人。團隊在平常的業務對接以外，還在物料體系、工程平臺、搭建平臺、性能體驗、雲端應用、數據分析及可視化等方向進行技術探索和實戰，推進並落地了一系列的內部技術產品，持續探索前端技術體系的新邊界。

若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「5 年工做時間 3 年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手推進一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com

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