css_02 | 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！
相關文章
- 1. css選擇器詳解
- 2. CSS選擇器詳解
- 3. CSS選擇器詳解（轉）
- 4. CSS 選擇器【詳解】
- 5. css -- css選擇器
- 6. 【CSS】【選擇器】CSS選擇器種類
- 7. css選擇器
- 8. CSS選擇器
- 9. CSS 選擇器
- 10. CSS-選擇器
- 更多相關文章...
- • CSS 指南 - 網站建設指南
- • W3C CSS 活動 - W3C 教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • Flink 數據傳輸及反壓詳解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. css選擇器詳解
- 2. CSS選擇器詳解
- 3. CSS選擇器詳解（轉）
- 4. CSS 選擇器【詳解】
- 5. css -- css選擇器
- 6. 【CSS】【選擇器】CSS選擇器種類
- 7. css選擇器
- 8. CSS選擇器
- 9. CSS 選擇器
- 10. CSS-選擇器