本文推薦 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
經過以前對 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
若是一個元素出如今文檔層次結構中另外一個元素的上一層,則稱前者是後者的「父元素」,後者是前者的「子元素」。面試
若是一個元素在另外一個元素的直接上一層,他們是「父子關係」,而若是一個元素到另外一個元素的路徑要通過兩層或多層,這些元素則是「祖孫-後代關係」。瀏覽器
body 元素是瀏覽器默認顯示的全部元素的祖先, html 元素則是整個文檔的祖先(所以,html 元素又稱「根元素」)。bash
h1,h2 {
background:yellow;
}
複製代碼
⚠️注意多個選擇器之間必須有 ,
這個字符。post
ul em {
text-decoration: line-through;
background:yellow;
}
複製代碼
p>em {
text-decoration: line-through;
background:yellow;
}
複製代碼
>
這個「結合符」隔開。
h2+p {
text-decoration: line-through;
background:yellow;
}
複製代碼
+
這個「結合符」隔開。
h2~h2 {
text-decoration: line-through;
background:yellow;
}
複製代碼
~
這個「結合符」隔開。
首先再次複習:《② HTML 元素、屬性詳解》中關於「超連接 a 元素」的相關知識點。學習
「連接」在實際頁面中出現的頻率很高,人們想對「未訪問的頁面」和「已訪問的頁面」做樣式上的區分,直觀的方式就是在 HTML 文檔裏邊對 a 元素做 class 屬性的添加,讓這個 a 元素加入一個類:
<a href="http://…" class="visited">這裏是連接</a>
複製代碼
而後經過「類選擇器」對其加樣式:
a.visited {
color=red;
}
複製代碼
但,顯而易見,這種方式根本就不合乎實際操做,由於不可能每訪問一個新頁面就去修改一下連接的「類」。
因而,CSS 定義了兩個只用於「超連接」的「靜態僞類」,這些「僞類」不用在 HTML 文檔中輸入,能夠直接對其添加樣式。分別爲:
:link
複製代碼
⚠️注意書寫格式上的「冒號」,這個冒號 :
是「僞類」和「僞元素」的名片。且冒號與狀態 link
之間不能有空格。
:visited
複製代碼
在上文中咱們瞭解到 CSS 爲適應須要,最早定義了兩個「靜態僞類」,但 :link
和 :visited
對文檔樣式的改變頗有限,通常第一次顯示事後就不會再起做用了。
而人們的須要則更多:連接「焦點 focus 」時、在連接上「懸停 hover 」時、「活動 active 」狀態時,都須要樣式的區分。
因而,CSS 又定義了3個「動態僞類」,它們能夠根據用戶行爲相應的改變文檔的外觀。這些「僞類」或者說全部「僞類」都不用在 HTML 文檔中輸入,能夠直接對其添加樣式。分別爲:
:focus
複製代碼
:hover
複製代碼
:active
複製代碼
⚠️注意:
:link
:visited
:focus
:hover
:active
複製代碼
首先再次複習:《③ 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;
}
複製代碼
:checked
複製代碼
::selection
複製代碼
:enabled
:disabled
複製代碼
: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;
}
複製代碼
⚠️此大類選擇器須要用實例講解,篇幅較長,將後續另起一篇文章講解。此篇僅做相關知識點列舉。
(下文中 E 指 element 元素)
1. 選擇父元素的第一個子元素。
E:first-child
2. 選擇父元素的最後一個子元素。
E:last-child
3. 選擇父元素下第 n 個元素或奇偶元素,n 的值爲:數字/odd/even。
E:nth-child(n)
4. 選擇父元素中惟一的子元素————該父元素只有一個子元素。
E:only-child
複製代碼
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
複製代碼
1. 文檔的「根元素」--html 元素。
:root
2. 選擇某個元素以外的全部元素。
E:not(selector)
3. 選擇一個不包含任何子元素的元素,須要注意的是「文本節點」也能夠被當作子元素。
E:empty
4. 選取頁面中的某個 target 元素。
E:target
複製代碼
後記: 終於完成了這篇,知識點不少,若是隻是單純看一遍收穫會很小,代碼的學習須要咱們動起手來,不停的敲、不停的試。跟機器打交道的好處就是,它通常來講不會騙你,對就是對,錯就是錯。總之,感謝這個時代!
祝好,qdywxs ♥ you!