css - pseudo_classes

上一页
下一页

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

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

什么是伪类？

  • 伪类通常与 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 pseudo-class


<!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() 将选择器列表作为其参数，并选择任何匹配的元素。
本页
上一页
下一页