前端入門-css偽類和偽元素

類（pseudo-class）用于定義元素的特殊狀態，偽元素（pseudo-element）用于設置元素指定部分的樣式，語法如下：

偽類

selector:pseudo-class {
  property: value;
}

偽元素

selector::pseudo-element {
  property: value;
}

偽類以“:”單個冒號開頭，偽元素以“::”兩個冒號開頭，注意區分它們的，比較容易混淆。

偽元素選擇器

常用的偽元素有這些：

選擇器	例子	例子描述
::after	p::after	在每個 <p> 元素之后插入內容。
::before	p::before	在每個 <p> 元素之前插入內容。
::first-letter	p::first-letter	選擇每個 <p> 元素的首字母。
::first-line	p::first-line	選擇每個 <p> 元素的首行。
::selection	p::selection	選擇用戶選擇的元素部分。

如下示例：

<html>
<head>
<style>
p::before
{
content:"臺詞：";
}
</style>
</head>
<body>
<p>我是唐老鴨。</p>
<p>我住在 Duckburg。</p>
</body>
</html>

效果：

同理:after是在結尾插入字符，::after 和 ::before 常和content屬性配合使用，用來出入特殊字符等。

偽元素可以是單冒號，可以是雙冒號，較規范使用建議是雙冒號。一個選擇器中只能使用一個偽元素。偽元素必須緊跟在語句中的簡單選擇器/基礎選擇器之后。

其它的偽元素可以參考：

https://www.w3school.com.cn/css/css_pseudo_elements.asp

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

偽類按照功能可以分為以下幾種：

錨偽類 —— 作用于鏈接a標簽元素，常用來定義鏈接的不同狀態。
表單相關偽類——作用于表單元素，常用來定義表單不同的行為狀態。
擴展選擇型偽類——按照邏輯規則選擇元素，比如選擇最后一個子元素，偶數或奇數序列的元素等。
其它偽類

錨偽類

錨偽類主要用于a鏈接上，比如鼠標經過鏈接，點擊鏈接后等狀態，使用偽類可以定義不同狀態下鏈接的樣式，如下示例：

html：

<a>鏈接</a>

css：

/* 未訪問的鏈接 */
a:link {
  color: #FF0000;
}
/* 已訪問的鏈接 */
a:visited {
  color: #00FF00;
}
/* 鼠標懸停鏈接 */
a:hover {
  color: #FF00FF;
}
/* 已選擇的鏈接 */
a:active {
  color: #0000FF;
}

顯示效果：

一般按照 :link、:visited、:hover、:active 的順序(LVHA)使用，其中:hover 會被其它的偽類覆蓋，為了確保:hover生效，:hover 需要放在 :link 和 :visited 之后，:active 之前。

:link 偽類，只有當a鏈接有href屬性且是有效的鏈接，才會起作用，如下示例：

<a href="#" target="_blank">這是一個鏈接</a>

href屬性改成上面這樣時，：link不起作用，按理應該顯示紅色，但卻顯示綠色。

:hover 偽類可以在任何元素上使用，其用處很多，比如鼠標經過顯示隱藏效果。

如下示例：

div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}
div:hover {
  background-color: blue;
}

使用:hover 另一個典型的例子就是，制作下拉菜單，不需要使用JavaScript，如下示例：

demo 演示可以看這里：https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3700/3e1094a1c7b42332b9bdef0d0b0c4a7f/css_dropdown_menu.html

除了以上幾種鏈接相關的偽類，還有一個突出顯示當前活動的錨鏈接——:target 偽類。如下示例：

html

<p><a href="#news1">跳轉至內容 1</a></p>
<p><a href="#news2">跳轉至內容 2</a></p>
<p>請點擊上面的鏈接，:target 選擇器會突出顯示當前活動的 HTML 錨。</p>
<p id="news1"><b>內容 1...</b></p>
<p id="news2"><b>內容 2...</b></p>

css

:target {
		border: 2px solid #D4D4D4;
		background-color: #e5eecc;
}

效果顯示：

表單相關偽類

此類偽類都是和表單元素有關的，比如下面這些：

選擇器	例子	例子描述
:checked	input:checked	選擇每個被選中的 <input> 元素。
:disabled	input:disabled	選擇每個被禁用的 <input> 元素。
:enabled	input:enabled	選擇每個已啟用的 <input> 元素。
:focus	input:focus	選擇獲得焦點的 <input> 元素。
:in-range	input:in-range	選擇具有指定范圍內的值得 <input> 元素。
:invalid	input:invalid	選擇所有具有無效值的 <input> 元素。
:optional	input:optional	選擇不帶 "required" 屬性的 <input> 元素。
:out-of-range	input:out-of-range	選擇值在指定范圍之外的 <input> 元素。
:read-only	input:read-only	選擇指定了 "readonly" 屬性的 <input> 元素。
:read-write	input:read-write	選擇不帶 "readonly" 屬性的 <input> 元素。
:required	input:required	選擇指定了 "required" 屬性的 <input> 元素。
:valid	input:valid	選擇所有具有有效值的 <input> 元素。

在這里介紹幾個常用的，比如:checked，匹配任意被勾選/選中的 radio(單選按鈕),checkbox(復選框),或者 option(select 中的一項)，如下示例：

html:

<div>
  <input type="radio" name="my-input" id="yes">
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no">
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in">
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

css

div,
select {
  margin: 8px;
}

/* Labels for checked inputs */
input:checked + label {
  color: red;
}

/* Radio element, when checked */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* Checkbox element, when checked */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* Option elements, when selected */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

效果顯示：

注意：不同的瀏覽器通過:checked偽類渲染出來的效果也不盡相同。

再看另一個 :disabled 偽類，匹配禁用的的表單元素，如下示例：

html：

<form action="#">
  <fieldset id="shipping">
    <legend>非禁用狀態</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Address">
    <input type="text" placeholder="Zip Code">
  </fieldset>
  <br>
  <fieldset id="billing">
    <legend>禁用狀態</legend>
    <input type="text" placeholder="Name" disabled>
    <input type="text" placeholder="Address" disabled>
    <input type="text" placeholder="Zip Code" disabled>
  </fieldset>
</form>

css：

input
{
background:#ffff00;
}
input:disabled
{
background:#dddddd;
}

效果：

如上圖，可以看到禁用輸入框背景色是灰色。

擴展選擇型偽類

這類偽類，是用來彌補css選擇器的不足，比如如果我想選擇當前元素里所有p元素最后一個怎么辦？

相關偽類主要有如下這些：

選擇器	例子	例子描述
:first-child	p:first-child	選擇所有元素下級的第一個 <p> 元素，且必須是第一個子元素。
:first-of-type	p:first-of-type	選擇所有元素下級的首個出現的<p> 元素，不必是第一子元素。
:last-child	p:last-child	選擇所有元素下級的最后一個<p> 元素，且必須是最后一個子元素。
:last-of-type	p:last-of-type	選擇所有元素下級的最后出現的<p> 元素，不必是最后一個子元素。
:not(selector)	:not(p)	選擇每個非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	選擇所有元素下級的第二個<p> 元素，且必須是第二個子元素。
:nth-last-child(n)	p:nth-last-child(2)	選擇所有元素下級的倒數第二個<p> 元素，且必須是倒數第二個子元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	選擇所有元素下級的倒數第二個<p> 元素，不必是倒數第二個子元素。
:nth-of-type(n)	p:nth-of-type(2)	選擇所有元素下級的第二個<p> 元素，不必是第二個子元素。
:only-of-type	p:only-of-type	代表了任意一個元素，這個元素沒有其他相同類型的兄弟元素。
:only-child	p:only-child	匹配沒有任何兄弟元素的元素。

first-*、last-*開頭、nth-*、only-*的偽類，都是指所有元素節點下匹配的元素。

如下示例：

p:first-child 匹配所有節點中第一個子節點是<p>元素的節點。

代碼：

<html>
<head>
<style>
p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>
<p>這個段落是其父元素（body）的首個子元素。</p>
<h1>歡迎訪問我的主頁</h1>
<p>這個段落不是其父元素的首個子元素。</p>
<div>
<p>這個段落是其父元素（div）的首個子元素。</p>
<p>這個段落不是其父元素的首個子元素。</p>
</div>
</body>
</html>

效果：

同理，p:last-child 匹配所有節點中最后一個子節點是<p>元素的節點。

-of-type 結尾的偽類指特定類型的元素，和特定的元素位置無關，比如:first-child 和 :first-of-type的區別就是，前者匹配的元素必須是第一個子元素，后者只要是首次出現的就可以，通俗將就是前者是相對于父級計算位置，后者是相對于同級兄弟節點計算的。

如下示例：

<head>
<style> 
p:first-of-type
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<span>文字</span>
<p>這是第一個段落。</p>
<p>這是第二個段落。</p>
</div>

效果：

如上圖，p元素并非第一個子元素，這就是*-of-type偽類的特點。

only-開頭的偽類是指唯一性，比如p:only-child 指其父元素下只有一個p元素時，且必須是第一個子元素，only-of-type 的區別就是不必是第一個子元素。

如下示例：

<head>
<style> 
p:only-child
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<p>這是一個段落。</p>
</div>
<div>
<span>這是一個 span。</span>
<p>這是一個段落。</p>
</div>

效果：

當給第一個段落同級加上其它元素，你會發現only-child就不起作用了。

這部分偽類，比較晦澀難懂，多加練習，一定要明白這幾種直接的區別才行。

其它偽類

比如：root、：empty、等，還有其它處在實驗階段的偽類，在這里不一一介紹了。

關于偽類知識，可以參考：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

https://www.w3school.com.cn/css/css_pseudo_classes.asp

類

a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定(點擊時)的鏈接 */
.tButton:link {color: #FF0000}
.tButton:visited {color: #FF0000}
.tButton:hover {color: #FF0000}
.tButton:active {color: #FF0000}

注意:

在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后, 才是有效的。

在 CSS 定義中，a:active 必須被置于 a:hover 之后, 才是有效的。

記住, 這四種狀態, 在css中, 必須按照固定的順序寫：

a:link 、a:visited 、a:hover 、a:active

常用的a鏈接樣式：

a:link,a:visited{text-decoration:none;color:#444;}
a:hover{color:#f00;}

偽元素

:first-line 偽元素

"first-line" 偽元素用于向某個選擇器中的文字的首行添加特殊樣式：

:first-letter 偽元素

first-letter 偽元素用于向某個選擇器中的文本的首字母添加特殊的樣式：

:before 選擇器

:before 選擇器在被選元素的內容前面插入內容。

請使用 content 屬性來指定要插入的內容。

在每個 <p> 元素的內容之前插入新內容：

p:before{
content:"臺詞：";
}

:after 選擇器

:after 選擇器在被選元素的內容后面插入內容。

請使用 content 屬性來指定要插入的內容。

p:after{
content:"臺詞：";
}

:selection 對光標選中的元素添加樣式。

特殊符號的使用

.label:before{content:"15";margin-right:0.3rem;}

篩選分功能的偽類

:empty 選取沒有子元素的元素。比如選擇空的 span, 就可以用 span:empty 選擇器來選擇。這里要注意元素內有空格的話也不能算空, 不會被這個偽類選中。

:checked 選取勾選狀態的 input 元素，只對 radio 和 checkbox 生效。

:disabled 選取禁用的表單元素。

:first-child 選取當前選擇器下第一個元素。

:last-child 與first-child 相反, 選取當前選擇器下最后一個元素。

:nth-child(an+b) 選取指定位置的元素。比如使用 li:nth-child(2n+1)

:nth-last-child(an+b) 這個偽類和 nth-child 相似, 只不過在計數的時候, 這個偽類是從后往前計數。

:only-child 選取唯一子元素。如果一個元素的父元素只有它一個子元素, 這個偽類就會生效。如果一個元素還有兄弟元素, 這個偽類就不會對它生效。

:only-of-type 選取唯一的某個類型的元素。如果一個元素的父元素里只有它一個當前類型的元素, 這個偽類就會生效。這個偽類允許父元素里有其他元素, 只要不和自己一樣就可以。

實例:制作首行特效

<html>
<head>
<style type="text/css">
p:first-line
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>
<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>
</html>

實例:制作首字母特效

<html>
<head>
<style type="text/css">
p:first-letter
{
color: #ff0000;
font-size:xx-large
}
</style>
</head>
<body>
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>
</body>
</html>

子選擇器

:nth-child(n) p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。

:nth-of-type(n) p:nth-of-type(2) 選擇屬于其父元素第二個 <p> 元素的每個 <p> 元素。

nth-child(①阿拉伯數字 ②odd even ③表達式)

li:nth-child(3n+1){
color: red;
}

實例:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
/*strong:nth-child(阿拉伯數字2){
選擇stong并且strong在家里的排行是老2
}
strong:nth-of-type(阿拉伯數字2){
選擇strong但是他只要是類型的第二個就行了
}*/


/*strong:nth-child(2){ /* 沒有 */
color: red;
}*/

strong:nth-of-type(2){ /* <strong>我是三哥</strong> */
color: green;
}
</style>
</head>
<body>
<div>
<strong>我是大哥</strong>
<em>我是二姐</em>
<strong>我是三哥</strong>
<em>我是四妹</em>
</div>
</body>
</html>

實例: 各行變色

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
li:nth-child(even){
background-color: orange;
}
li:nth-child(odd){
background-color: pink;
}
li:nth-child(5){/*單獨給第5個設置了*/
background-color: purple;
}
</style>
</head>
<body>
<button id="btn">新建</button>
<ul id="ul">
<li>明年或有4000億外資入市 美聯儲12月或再加息</li>
<li>科技 | 谷歌"臨時工"向CEO發公開信 要求提高工資</li>
<li>iOS 12.1.1更新發布：支持更多運營商使用雙SIM卡</li>
<li>體育 | 獻上膝蓋!外籍大神足彩11連中賺3040倍贏不停</li>
<li>三年抱倆！江宏杰宣布福原愛懷二胎 已懷孕6個月</li>
<li>曝林志穎登機后要拿行李 致航班延誤惹人怨</li>
<li>庫里飆9三分戲耍般轟42+9+7 復出后光速回歸巔峰</li>
</ul>


<script type="text/javascript">
btn.onclick = function(){
ul.innerHTML += "<li>陳偉騰的愛豆是kobe</li>";
}
</script>
</body>
</html>

CSS2.1中只能給標簽增加：a:link、a:hover、a:visited、a:active

:focus input:focus 選擇獲得焦點的 input 元素。

:empty p:empty 選擇沒有子元素的每個 <p> 元素（包括文本節點）。

:checked input:checked 選擇每個被選中的 <input> 元素。

:enabled input:enabled 選擇每個啟用的 <input> 元素。

:disabled input:disabled 選擇每個禁用的 <input> 元素

:target #news:target 選擇當前活動的 #news 元素

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
/*
偽類選擇器我們通常習慣用一個冒號隔開

*/

/*獲得焦點*/
input[type="text"]:focus{
border-color: red;
outline: none;
}

/*元素被選中*/
[type="checkbox"]:checked,[type="radio"]:checked{
width: 50px;
height: 50px;
}

/*被禁用的 說白了就是元素有disable屬性的標簽*/
button:disabled{
background-color: orange;
}
</style>
</head>
<body>
<!--CSS2.1中只能給標簽增加：a:link、a:hover、a:visited、a:active
:focus input:focus 選擇獲得焦點的 input 元素。
:empty p:empty 選擇沒有子元素的每個 <p> 元素（包括文本節點）。
:checked input:checked 選擇每個被選中的 <input> 元素。
:enabled input:enabled 選擇每個啟用的 <input> 元素。
:disabled input:disabled 選擇每個禁用的 <input> 元素
:target #news:target 選擇當前活動的 #news 元素
-->
<input type="text" name="" id="" value="" />
<input type="radio" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<button disabled>按鈕被禁用</button>
<button>按鈕可點擊</button>
</body>
</html>

:selection

文本被選中的時候

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
div{
width: 600px;
border: 1px solid red;
}


/*偽元素選擇器我們習慣用2個冒號*/
/*div:after{
content: "NBA";
}*/


/*首字*/
div::first-letter{
font-size: 48px;
}

/*首行*/
div::first-line{
background-color: orange;
}

/*文本被選中的時候*/
div::selection{/*它必須是2個冒號*/
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<div>可怕的是，庫里有手感時，他是無法阻擋的，此后他繼續施展外線火力，首節就投出5中4的三分表現。首節他又得到了16分，上一場比賽他首節得到18分，看來復出后庫里的狀態是迅速又回到了開季的巔峰。庫里下去休息時，為勇士建立了7分的優勢，結果他在場下沒一陣功夫，優勢都被騎士重新追趕回去了。重新上陣后，庫里還是保持良好的進攻狀態，外線又是4中2，而且他在該傳球時就果斷傳，不會拖泥帶水。半場最后階段，騎士突然打出進攻高潮，狂中3分，庫里也有回應，但對面還是各種神仙球也進，沒辦法，上半場勇士暫時落后。</div>
</body>
</html>
:only-child和:only-of-type
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
del:only-child{
/*我選擇del標簽并且該標簽作為div唯一的兒子*/
color: red;
}

del:only-of-type{
/*我選擇del標簽并且該標簽作為div唯一的類型*/
background-color: orange;
}
</style>
</head>
<body>
<div>
<strong>我是大哥</strong>
<em>我是二姐</em>
<strong>我是三哥</strong>
<em>我是四妹</em>
<del>我是五弟</del>
</div>
</body>
</html>

:nth-child和nth-last-child

接偽類

所謂偽類意思就是不是一個真正的類；

語法：

a:link { 屬性：值；}

a { 屬性：值；}

使用方法：

方法解釋link默認狀態visited鏈接訪問之后的狀態hover鼠標放到鏈接上的狀態active超鏈接激活的狀態，意思就是鼠標按上去不松手的狀態focus鼠標點擊之后要做的操作

visited

<title>Document</title>

a {

color: red;

}

a:visited {

color: green;

}

</style>

</head>

<body>

<a href="#">北京馬哥教育基地</a>

</body>

hover

a {

color: red;

}

a:hover {

color: blue;

}

</style>

</head>

<body>

<a href="#">北京馬哥教育基地</a>

</body>

active

a {

color: red;

}

a:active {

color: fuchsia;

}

</style>

</head>

<body>

<a href="#">北京馬哥教育基地</a>

</body>

連接導航案例

<!doctype html>

<head>

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<title>Document</title>

.nav {

height: 60px;

background-color: darkgrey;

text-align: center;

}

.nav a {

display: inline-block;

width: 100px;

height: 60px;

text-decoration: none;

color: blue;

}

.nav .public {

color: orange;

}

.nav a:hover {

background-color: silver;

text-decoration: underline;

}

</style>

</head>

<body>

</div>

</body>

</html>

結構偽類選擇器

:first-child :選取屬于其父元素的首個子元素的指定選擇器

:last-child :選取屬于其父元素的最后一個子元素的指定選擇器

:nth-child(n):(n 可以是數字、關鍵詞或公式)匹配屬于其父元素的第 N 個子元素，不論元素的類型

:nth-last-child(n):選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數。

<body>

</body>

.cce:first-child {

height: 30px;

background-color: red;

}

在線咨詢

上一篇：Web前端開發之HTML簡介
下一篇：HTML 表格

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端入門-css偽類和偽元素

偽元素選擇器

偽類按照功能可以分為以下幾種：

錨偽類

表單相關偽類

擴展選擇型偽類

其它偽類

您的項目需求