css_02 | CSS——CSS 選擇器詳解

時間 2019-11-06

標籤 css 選擇器詳解欄目 CSS 简体版

原文原文鏈接

本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

css_02
複製代碼

1. 僞類選擇器有哪些？
2. 僞元素和僞類的區別？
3. 關於 css 選擇器，如下說法正確的是？（不定項）
  ❌ header .p 是選擇 id 爲 header 的類型爲 p 的全部後代。
  ✅ header > .p 是選擇標籤爲 header 內的 class 爲 p 的直接子元素。
  ✅ #header.p 是選擇 id 爲 header 同時它的 class 爲 p 的元素。
  ✅ #header, p 是選擇 id 爲 header 的元素以及選擇全部的 p 標籤。
複製代碼

前言： 本篇行文順序爲，首先在第一部分介紹「 HTML 文檔樹結構」。在徹底理解這個「樹結構」的基礎上，才能夠很好的掌握文章下邊緊接着的兩個大選擇器（組合選擇器和僞類選擇器）。由於，只有有了這個「結構樹」，咱們本篇討論的「選擇器」纔可以起做用。又是很大、很雜、很基礎、很重要的知識點，屬必掌握項。css

1 HTML 文檔樹結構

經過以前對 HTML 相關知識的學習，咱們知道，一個 HTML 文檔是以各個元素間的層次結構爲基礎創建起來的，每一個合法的文檔都會生成一個結構樹（以下例）。html

在這個層次結構中，每個元素都有一個本身的位子，而且每一個元素相對於這個結構裏的其餘元素，它們彼此或是「父子關係」、或是「祖孫—後代關係」、或是「直接相鄰關係」、或是「普通相鄰關係」等。前端

（以下例的HTML文檔及所對應的「結構樹」：）程序員

<!DOCTYPE html>
<html>                                            
 <head> 
  <meta charset="utf-8"> 
  <title>Oli的前端一萬小時</title>
 </head>
 <body>
  <h1>《<em>Oli的前端一萬小時</em>》之:xxx</h1> 
  <p><em>本知識學習用時：2小時……</em></p>
  <p><strong><em>前言:</em></strong>Oli是怎樣寫文章的……</p>
  <h2>1、認識xxx</h2>
  <p>首先把<em>「定義」</em>講解清楚</p>     
  <h2>2、爲何xxx</h2>                      
  <ul>
   <li>是什麼
    <ol>                                           
     <li>what
      <ul>
       <li>w</li>
       <li>w</li>
       <li>h</li>
      </ul>
     </li>                            
     <li>why</li>                           
     <li><em>how</em></li>  
    </ol>
   </li>
   <li>爲何</li>                           
   <li>怎麼樣</li>  
  </ul>  
  <h2>3、怎麼樣xxx</h2>                      
  <ol>                                             
   <li>what</li>
   <li>why</li>                           
   <li><em>how</em></li> 
  </ol>                  
 </body>                                            
</html>
複製代碼

（文檔結構爲：）web

1.1 父子關係元素

若是一個元素出如今文檔層次結構中另外一個元素的上一層，則稱前者是後者的「父元素」，後者是前者的「子元素」。面試

1.2 祖孫-後代關係元素

若是一個元素在另外一個元素的直接上一層，他們是「父子關係」，而若是一個元素到另外一個元素的路徑要通過兩層或多層，這些元素則是「祖孫-後代關係」。瀏覽器

1.3 根元素

body 元素是瀏覽器默認顯示的全部元素的祖先， html 元素則是整個文檔的祖先（所以，html 元素又稱「根元素」）。bash

2 組合選擇器

2.1 多元素選擇器

用法：爲多個元素應用同一個樣式；
格式：如給上例中元素 h1 和 h2 加樣式，使之背景顏色爲 yellow 。

h1,h2 {
    background:yellow;
}
複製代碼

⚠️注意多個選擇器之間必須有 , 這個字符。post

2.2 後代選擇器

用法：使一些樣式、規則只在某一些指定的有「祖孫-後代關係」的後代元素上適用，其餘非指定的結構中不適用；
格式：如給上例中只給元素 ul 的後代元素 em 加樣式，使其文字被中橫線劃去、背景色爲 yellow 。

ul em {
    text-decoration: line-through;
    background:yellow;
}
複製代碼

⚠️注意選擇器之間用「空格」這個「結合符」隔開。

2.3 子元素選擇器

用法：使一些樣式、規則只在某一些指定的有直接的「父子關係」的子元素上適用，其餘非指定的結構中不適用；
格式：如給上例中只給元素 p 的子元素 em 加樣式，使其文字被中橫線劃去、背景色爲 yellow 。

p>em {
    text-decoration: line-through;
    background:yellow;
}
複製代碼

⚠️注意選擇器之間用 > 這個「結合符」隔開。

2.4 直接相鄰元素選擇器

用法：前提，兩個元素有共同的父元素，且後一個元素「緊接」在前一個元素後邊時，你想對後一個元素添加樣式；
格式：如給上例中只給「緊接」第一個 h2 元素的 p 元素加樣式，其餘 p 不變，使其文字被中橫線劃去、背景色爲 yellow 。

h2+p {
    text-decoration: line-through;
    background:yellow;
}
複製代碼

⚠️注意選擇器用 + 這個「結合符」隔開。

2.5 普通相鄰元素選擇器

用法：相對於「直接相鄰元素選擇器」而言，兩個元素也必須有共同的父元素，但後一個元素不須要「緊接」在前一個元素後邊，你也能夠對後一個元素添加樣式;
格式：如給上例中第一個 h2 元素後邊的 h2 元素加樣式，使其文字被中橫線劃去、背景色爲 yellow 。

h2~h2 {
    text-decoration: line-through;
    background:yellow;
}
複製代碼

⚠️注意選擇器用 ~ 這個「結合符」隔開。

3 僞類

3.1 爲何須要「僞類」？

首先再次複習：《② HTML 元素、屬性詳解》中關於「超連接 a 元素」的相關知識點。學習

「連接」在實際頁面中出現的頻率很高，人們想對「未訪問的頁面」和「已訪問的頁面」做樣式上的區分，直觀的方式就是在 HTML 文檔裏邊對 a 元素做 class 屬性的添加，讓這個 a 元素加入一個類：

<a href="http://…" class="visited">這裏是連接</a>
複製代碼

而後經過「類選擇器」對其加樣式：

a.visited {
    color=red;
}
複製代碼

但，顯而易見，這種方式根本就不合乎實際操做，由於不可能每訪問一個新頁面就去修改一下連接的「類」。

因而，CSS 定義了兩個只用於「超連接」的「靜態僞類」，這些「僞類」不用在 HTML 文檔中輸入，能夠直接對其添加樣式。分別爲：

指示這個「超連接」（即 a 元素裏有一個 href 屬性）未被訪問。

:link
複製代碼

⚠️注意書寫格式上的「冒號」，這個冒號 : 是「僞類」和「僞元素」的名片。且冒號與狀態 link 之間不能有空格。

指示這個「超連接」已被訪問。

:visited
複製代碼

3.2 爲何須要「動態僞類」？

在上文中咱們瞭解到 CSS 爲適應須要，最早定義了兩個「靜態僞類」，但 :link 和 :visited 對文檔樣式的改變頗有限，通常第一次顯示事後就不會再起做用了。
而人們的須要則更多：連接「焦點 focus 」時、在連接上「懸停 hover 」時、「活動 active 」狀態時，都須要樣式的區分。

因而，CSS 又定義了3個「動態僞類」，它們能夠根據用戶行爲相應的改變文檔的外觀。這些「僞類」或者說全部「僞類」都不用在 HTML 文檔中輸入，能夠直接對其添加樣式。分別爲：

指示這個元素擁有輸入「焦點」——便可以接受鍵盤輸入，或經過某種方式能夠激活。

:focus
複製代碼

指示當鼠標停留在這個元素上時，外觀能夠做相應改變。

:hover
複製代碼

指示這個元素能夠被用戶輸入「激活」，如，用戶停留在一個超連接上，當點擊鼠標時，這個連接就會「激活」。

:active
複製代碼

⚠️注意：

CSS 「僞類」不只能夠改變不一樣狀態時的顏色，還能夠應用任何須要的樣式；
「動態僞類」與「靜態僞類」不一樣，「動態僞類」能夠應用於任何元素，不侷限於「超連接」；
考慮到「繼承、層疊」的緣由（下一篇會詳談），「僞類」的順序很重要，一般爲：

:link
:visited
:focus
:hover
:active
複製代碼

4 僞類選擇器

4.1 「靜態、動態僞類選擇器」合用實例

首先再次複習：《③ HTML 表單詳解》，掌握表單元素。而後動手操做如下例子。

🔗源碼和效果展現
→ （根據如下 HTML 文檔：）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML表單</title>
</head>
<body>
  <a href="https://zhuanlan.zhihu.com/Oli-Zhao" title="Oli的前端一萬小時">個人博客地址</a>
<div class="login">                                                    
   <form action="/getinfo" method="get">                                             
       <div class="username">                                                        
          <label for="username">姓名</label>                                          
          <input id="username"  type="text" name="username" value="Oliver">          
       </div>
       <div class="password">
          <label for="password" >密碼</label>
          <input id="password" type="password" name="password" placeholder="輸入密碼"> 
       </div>
       <div class="sex">
          <label>性別</label>                                                         
          <input type="radio" name="sex" value="男" checked>男                        
          <input type="radio" name="sex" value="女">女
       </div>       
   </form>
</div>
</body>
</html>
複製代碼

→（再將 CSS 樣式引入其中：）

a:link {
    color: blue;
}

a:visited {
    color: red;
}

input:focus {
    background: yellow;
    font-weight: bold;
}

a:hover {
    font-size: 30px;
}

a:active {
    color: silver;
}
複製代碼

⚠️注意：下一篇文章會詳細闡述「連接」在隨用戶操做狀態變化時，其樣式是按怎樣的順序顯示的。

4.2 用戶界面元素僞類選擇器（UI 元素僞類選擇器）

在「表單」元素中，radio 和 checkbox 都具備「選中」和「未選中」狀態，如下選擇器能夠定義這兩種狀態的樣式。

:checked
複製代碼

當咱們用鼠標左鍵按住進行網頁取詞時，瀏覽器在默認狀況下是「藍底黑字」，若是我想要改變這個樣式，我能夠用如下選擇器。

::selection
複製代碼

默認狀況下，web 表單元素皆「可用」，但其元素（文字輸入框、密碼框、單選框、複選框等）也能夠有「不可用」的狀態。那麼下邊的選擇器能夠分別對錶單元素的這兩種狀態設置樣式。

:enabled
:disabled
複製代碼

默認狀況下，web 表單元素皆「可讀寫」，但其元素（輸入框、文本域等）也能夠有「只讀」的狀態。那麼下邊的選擇器能夠分別對錶單元素的這兩種狀態設置樣式。

:read-write
:read-only
複製代碼

⚠️注意選擇器的格式！

代碼實例：
🔗源碼及效果展現

→ （根據如下 HTML 文檔：）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML表單</title>
</head>
<body>
  <a href="https://zhuanlan.zhihu.com/Oli-Zhao" title="Oli的前端一萬小時">個人博客地址</a>
<div class="login">
   <form action="/getinfo" method="get">
       <div class="username">
          <label for="username">姓名</label>
          <input id="username" type="text" name="username" value="Oliver">
       </div>
       <div class="password">
          <label for="password" >密碼</label>
          <input id="password" type="password" name="password" placeholder="輸入密碼">
       </div>
       <div class="sex">
          <label>性別</label>
          <input type="radio" name="sex" value="男">男
          <input type="radio" name="sex" value="女">女
       </div>
       <div>
         <label for="enabled">可用:</label>
         <input type="text" name="enabled">
       </div>
       <div>
         <label for="disabled">不可用:</label>
         <input type="text" name="disabled" disabled="disabled">
       </div>
       <div>
         <label for="enabled">讀寫:</label>
         <input type="text" name="status">
       </div>
       <div>
         <label for="disabled">只讀:</label>
         <input type="text" name="status" readonly="readonly">
       </div>
   </form>
</div>
  <p>Oli努力作個「偉大的程序員」，他是個好人！</p>
</body>
</html>
複製代碼

→（再將 CSS 樣式引入其中：）

a:link {
    color: blue;
}

a:visited {
    color: red;
}

input:focus {
    background: yellow;
    font-weight: bold;
}

a:hover {
    font-size: 30px;
}

a:active {
    color: silver;
}

:checked {
    font-size: 50px;
}

p::selection {
    background-color: orange;
    color: white;
}

input:enabled {
    outline: 1px dotted black;
}

input:disabled {
    background-color: green;
}

input:read-write {
    outline: 1px dotted black;
}

input:read-only {
    background-color: gray;
}
複製代碼

4.3 結構僞類選擇器

⚠️此大類選擇器須要用實例講解，篇幅較長，將後續另起一篇文章講解。此篇僅做相關知識點列舉。
（下文中 E 指 element 元素）

4.3.1 第一類

1. 選擇父元素的第一個子元素。
E:first-child

2. 選擇父元素的最後一個子元素。
E:last-child

3. 選擇父元素下第 n 個元素或奇偶元素，n 的值爲：數字/odd/even。
E:nth-child(n)

4. 選擇父元素中惟一的子元素————該父元素只有一個子元素。
E:only-child
複製代碼

4.3.2 第二類

1. 選擇同類型的第一個同級兄弟元素。
E:first-of-type

2. 選擇同類型的最後一個同級兄弟元素。
E:last-of-type

3. 選擇同類型的第 n 個同級兄弟元素，n 的值爲：數字/odd/even。
E:nth-of-type(n)

4. 選擇父元素中特定類型的惟一子元素————該父元素有多個子元素。
E:only-of-type
複製代碼

4.3.3 第三類

1. 文檔的「根元素」--html 元素。
:root

2. 選擇某個元素以外的全部元素。
E:not(selector)

3. 選擇一個不包含任何子元素的元素，須要注意的是「文本節點」也能夠被當作子元素。
E:empty

4. 選取頁面中的某個 target 元素。
E:target
複製代碼

後記： 終於完成了這篇，知識點不少，若是隻是單純看一遍收穫會很小，代碼的學習須要咱們動起手來，不停的敲、不停的試。跟機器打交道的好處就是，它通常來講不會騙你，對就是對，錯就是錯。總之，感謝這個時代！

祝好，qdywxs ♥ you！