css - 伪类（pseudo_classes）_CSS 菜鸟教程

CSS 伪类（pseudo_classes） 用于根据元素在文档树中的状态或位置来选择元素并设置其样式，而无需添加额外的类或 JavaScript。

例如，当鼠标悬停在元素上时，伪类可用于更改元素的颜色，或者单击按钮以更改颜色。

什么是伪类（pseudo_classes）？

伪类通常与 CSS 选择器一起使用，通过在选择器后插入冒号（ : )。例如 a :hover{}，这里的选择器 'a' 将选择文档中的所有锚标签。
函数式伪类包含一对括号来定义参数。例如：lang（en）。
伪类附加到的元素称为锚点元素。例如：button:hover、a:focus 等。这里按钮和一个元素被称为锚元素。
伪类根据文档树的内容将样式应用于元素。
伪类还会根据外部因素对元素应用样式，例如元素的导航历史记录（ :visited ）、内容的状态（ :checked ）或鼠标位置（ :hover )

语法

selector:pseudo-class {
	 property: value;
}

伪类悬停

在 CSS 中，伪类 :hover 用于指定元素的鼠标悬停状态。这用于在用户鼠标穿过文档中的元素时设置元素的样式。

语法

tag:hover {
	 property: value;
}

以下示例演示如何应用此功能。

<!DOCTYPE html>
<html lang="en">
<head>
	 <style>
			a{
				 background-color: lightgrey;
				 padding: 10px;
			}
			a:hover {
				 color: red;
			}
		  
			div{
				 padding: 10px;
				 border: solid 3px;
				 background-color: aqua;
			}
			div:hover{
				 background-color: lightgreen;
			}
	 </style>
</head>

<body>
	 <h3>Anchor Tag Hovering</h3>
	 <a href="#">Hover over me!</a>
	 
	 <h3>Div Hovering</h3>
	 <div>Hover me</div>
</body>
</html>

伪类活动

当用户通过单击或点击元素来激活元素时，伪类 :active 将向元素应用样式。这最常用于交互式元素，如按钮和锚标记，但所有 HTML 元素都可以使用此伪类。

语法

tag:active {
	 property: value;
}

下面是一个示例，显示了伪类 active 的不同用法。

<!DOCTYPE html>
<html lang="en">
<head>
		<style>
			a, p, li {
				 color: black;
				 background-color: lightgrey;
				 padding: 7px;
				 border: 3px solid; 		 
			}

			a:active {
				 color: red;
			}
	 
			p:active {
				 background-color: gold;
			}
		  
			li:active {
				 background-color: darkred;
			}
		</style>
</head>

<body>
		<h2>Active Pseudo-Class Example</h2>
		<h3>For Button:</h3>
		<a href="#">Click Me</a>
	  
		<h3>For paragraph:</h3>
		<p>Click me to see the effect.</p>
	  
		<h3>For list:</h3>
				<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
		</ul>
</body>
</html>

伪类焦点

当用户通过单击输入标签等元素来聚焦元素时，伪类 :focus 将把样式应用于元素。在输入元素中输入文本之前，用户必须单击输入区域以启用光标，这称为聚焦。

语法

tag:focus {
	 property: value;
}

此示例将展示如何在 HTML 中使用伪类焦点。

<!DOCTYPE html>
<html lang="en">
<head>
	 <style>
			input{
				 padding:3px;
			}
			input:focus {
				 border-color: green;
				 background-color: lightgrey;
			}
	 </style>
</head>

<body>
		<h2>Pseudo-Class focus Example</h2>
		<h3>Focus on input text</h3>
		<input type="text" 
					 placeholder="Type Something!">

</body>
</html>

伪类第 n 个子

伪类 :nth-child(n) 将把样式应用于元素的任何指定的直接子元素。

语法

tag:nth-child(number/ expression / odd / even) {
	 property: value;
}

伪类第 n 个子类可以将数字、数学表达式或像奇数这样的值（偶数）作为参数。要了解与第 n 个子项关联的值，请访问我们关于伪类 :nth-child() 的教程。

<!DOCTYPE html>
<html lang="en">
<head>
		<style>
			div{
				 border: 2px solid;
				 margin: 7px;
				 padding: 2px;
			}
			/* Apply Style to 2nd child of div */
			div:nth-child(2){
				 background-color:red;
			}
		  
			/* Apply Style to all odd children of li */
			li:nth-child(odd) {
				 background-color: lightgray;
			}
		  
			/* Apply Style to all even children of li */
			li:nth-child(even) {
				 background-color: lightblue;
			}
		</style>
</head>

<body>
		<h2>Pseudo-Class nth-child</h2>
		<h3>2nd child of Div</h3>
		<div>
				<div>1st div</div>
				<div>2nd div</div>
				<div>3rd div</div>
				<div>4th div</div>
		</div>
	  
		<h3>Selecting odd and even children</h3>
		<ul>
				<li>First item</li>
				<li>Second item</li>
				<li>Third item</li>
				<li>forth item</li>
				<li>Third item</li>
				<li>fifth item</li>
		</ul>
</body>
</html>

伪阶级长子

用于选择第一个直接子元素的伪类 :first-child。

语法

tag:first-child {
	 property: value;
}

以下示例演示如何在 HTML 中使用第一个子伪类。

<!DOCTYPE html>
<html lang="en">
<head>
		<style>
			div{
				 border: solid;
			}
			/* Selects all first child paragraphs */
			p:first-child {
				 color: blue;
			}
		</style>
</head>
<body>   
	 <p>
			This paragraph is first child of body 
			element, will be blue.
	 </p>
	 <p>This paragraph will not be affected.</p>
	 <p>Another paragraph that won't be affected.</p>

	 <div>
			<p>
				 This paragraph is first child of div 
				 element will be blue.
			</p>
			<p>This paragraph will not be affected.</p>
			<p>Another paragraph that won't be affected.</p>
	 </div>
</body>
</html>

伪类 Last-Child

伪类 :last-child，用于选择最后一个直接子元素。

语法

tag:last-child {
	 property: value;
}

以下示例演示如何在 HTML 中使用最后一个子伪类。

<!DOCTYPE html>
<html lang="en">
<head>
		<style>
			div{
				 border: solid;
			}
			/* Selects all last child paragraphs */
			p:last-child {
				 color: blue;
			}
		</style>
</head>
<body>
	 <p>This paragraph will not be affected.</p>
	 <p>Another paragraph that won't be affected.</p>

	 <div>
			<p>This paragraph will not be affected.</p>
			<p>Another paragraph that won't be affected.</p>
			<p>
				 This paragraph is last child of div 
				 element will be blue.
			</p>
	 </div>

	 <p>
			This paragraph is last child of body 
			element, will be blue.
	 </p>
</body>
</html>

伪类郎

伪类 :lang() 将根据设置为元素或其父元素的 lang 属性的值将样式应用于元素。

下面是 :lang() 伪类的一个例子：

<html>
<head>
<style>
	 /* Selects all the tags that set english as language */
	 :lang(en) {
			quotes: '""';
	 }
	 /* Selects all the tags that set french as language */
	 :lang(fr) {
			quotes: '« ' ' »';
	 }
</style>
</head>
<body>
	 <h2>:lang() selector example</h2>
	 <q lang="en">
			This language is set as english, Here 
			css use double(" ") quotes
	 </q>

	 <br>

	 <q lang="fr">
			This language is set as French, Here 
			css use guillemet(« ») quotes
	 </q>

</body>
</html>

伪类不是

伪类 :not(selector) 用于将样式应用于上述选择器中包含的所有元素期望元素。要了解什么是CSS中的选择器，请查看我们的 CSS 选择器教程。

语法

tag:not(selector){
	 property: value;
}

选择器可以是 html 中的类、id 或标签。

例子

以下示例显示了如何在 CSS 中使用 :not 伪类

<!DOCTYPE html>
<html lang="en">
<head>
		<title>CSS :not() Example</title>
		<style>
			/*Style all paragraph except class special*/
			p:not(.special) {
				 color: red;
			}
		  
			/*Style all special paragraph except id superSpecial*/
			.special:not(#superSpecial){
				 background-color: lightgrey;
			}
		</style>
</head>

<body>
		<p>This is a normal paragraph.</p>
		<p class="special" id="superSpecial">
			This is a super special paragraph.
	 </p>
		<p>This is another normal paragraph.</p>
		<p class="special">
			This is special paragraph.
	 </p>
</body>
</html>

CSS 伪类列表

下表列出了所有 CSS 伪类：

伪类	描述
:active	表示用户已激活的元素。
:any-link	表示一个元素，该元素充当超链接的源锚点，与是否已被访问过无关。
:autofill	匹配浏览器具有其值 autofill 的元素。
:checked	匹配选中或切换的任何单选按钮、复选框或选项元素。
:default	选择一组相关元素中默认的表单元素。
:defined	表示已定义的任何自定义元素。
:disabled	表示已禁用的元素。
:empty	匹配没有子元素的元素。
:enabled	表示已启用的元素，该元素在被激活后。
:first	表示打印文档的第一页，其中 @page 为规则。
:first-child	表示一组同级元素中的第一个元素。
:first-of-type	表示一组同级元素中其类型的第一个元素。
:fullscreen	匹配当前以全屏模式显示的元素。
:focus	表示已获得焦点的元素。
:focus-visible	当元素与：focus 伪类匹配或接收焦点时应用。
:focus-within	如果元素或其任何后代聚焦元素，则匹配该元素。
:has()	如果有任何相对选择器，则表示一个元素。
:host	这将选择包含在其内部使用的 CSS 的影子 DOM 的影子主机。
:host()	此函数选择包含在其内部使用的 CSS 的影子 DOM 的影子主机。
:host-context()	此函数允许您根据其祖先元素的类或属性设置自定义元素的样式。
:hover	当用户使用定点设备（如鼠标）与元素交互时匹配，但不一定激活它。
:indeterminate	表示其状态不确定或未知的任何表单元素。
:in-range	表示其当前值在范围限制内的元素
:invalid	表示其内容无法验证的任何元素。
:is()	将选择器列表作为其参数，并选择可由该列表中的一个选择器选择的任何元素。
:lang()	根据元素被定义为使用的语言匹配元素。
:last-child	表示一组同级元素中的最后一个元素。
:last-of-type	表示一组同级元素中其类型的最后一个元素。
:left	表示打印文档的所有左侧页面，与 @page at-rule 一起使用。
:link	表示尚未访问过的元素。
:modal	匹配处于某种状态的元素，在这种状态下，它排除与其外部元素的所有交互，直到交互被消除。
:not()	表示与选择器列表不匹配的元素。
:nth-child()	根据子元素在父元素内的所有同级元素中的位置选择子元素。
:nth-last-child()	根据元素在兄弟姐妹中的位置匹配元素，从最后一个（结束）开始计算
:nth-last-of-type()	根据元素在相同类型的同级中的位置匹配元素，从最后一个（结束）开始计算。
:nth-of-type()	根据元素在相同类型的同级元素中的位置来匹配元素。
:only-child	表示没有任何同级元素的元素。
:only-of-type	表示没有相同类型的同级元素。
:optional	表示未设置必需属性的元素。
:out-of-range	表示其当前值超出范围限制的元素。
:picture-in-picture	匹配当前处于画中画模式的元素。
:placeholder-shown	表示当前正在显示占位符文本的任何元素。
:read-only	表示用户不可编辑的元素。
:read-write	表示用户可编辑的元素。
:required	表示一个元素，该元素上设置了必需属性。
:right	表示打印文档的所有右侧页面，与 @page at-rule 一起使用。
:root	匹配文档树的根元素。
:scope	表示作为选择器要匹配的参考点或范围的元素。
:target	表示 ID 与 URL 的片段匹配的目标元素。
:valid	表示其内容成功验证的任何元素。
:visited	一旦访问了链接，就适用。
:where()	将选择器列表作为其参数，并选择任何匹配的元素。

<< css - layers（图层）效果 CSS - 伪元素 >>