css_02 | CSS——CSS 選擇器詳解

本文推薦 PC 端閱讀~

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

獲取編號.png

css_02
複製代碼

涉及面試題.png

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>
複製代碼

02-01.png

(文檔結構爲:)web

02-02.png

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;
}
複製代碼

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

2.3 子元素選擇器

  • 用法:使一些樣式、規則只在某一些指定的有直接的「父子關係」的子元素上適用,其餘非指定的結構中不適用;
  • 格式:如給上例中只給元素 p 的子元素 em 加樣式,使其文字被中橫線劃去、背景色爲 yellow 。
p>em {
    text-decoration: line-through;
    background:yellow;
}
複製代碼

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

2.4 直接相鄰元素選擇器

  • 用法:前提,兩個元素有共同的父元素,且後一個元素「緊接」在前一個元素後邊時,你想對後一個元素添加樣式;
  • 格式:如給上例中只給「緊接」第一個 h2 元素的 p 元素加樣式,其餘 p 不變,使其文字被中橫線劃去、背景色爲 yellow 。
h2+p {
    text-decoration: line-through;
    background:yellow;
}
複製代碼

02-05.png

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

2.5 普通相鄰元素選擇器

  • 用法:相對於「直接相鄰元素選擇器」而言,兩個元素也必須有共同的父元素,但後一個元素不須要「緊接」在前一個元素後邊,你也能夠對後一個元素添加樣式;
  • 格式:如給上例中第一個 h2 元素後邊的 h2 元素加樣式,使其文字被中橫線劃去、背景色爲 yellow 。
h2~h2 {
    text-decoration: line-through;
    background:yellow;
}
複製代碼

02-06.png
⚠️注意選擇器用 ~ 這個「結合符」隔開。


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;
}
複製代碼

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

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;
}
複製代碼

02-08.png

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!

相關文章
相關標籤/搜索