CSS 伪类 - 易学教程，面试笔记经验！

CSS 中的伪类用于根据元素在文档树中的状态或位置来选择元素并设置元素样式，而无需向 HTML 元素添加额外的类或 ID。这些伪类主要用于在网页中创建交互式和动态样式。

语法

selector:pseudo-class {
   property: value;
}

伪类以冒号 (:) 开头，后面是选择器。例如：:hover、:focus 等。
函数伪类包含一对括号来定义参数。例如：:lang()。
附加伪类的元素称为锚元素。例如：button:hover、a:focus等。这里button和a元素称为锚元素。
伪类根据文档树的内容将样式应用于元素。
伪类还将与外部因素相关的样式应用于元素，例如元素导航的历史记录 (:visited)、内容的状态 (:checked) 或鼠标位置 (:hover)
与对整个元素设置样式的伪类不同，伪元素针对元素的特定部分并设置其样式。
就像常规类一样，您可以灵活地在单个选择器中组合多个伪类。

元素显示状态伪类

诸如 fullscreen, :modal 和 :picture-in-picture 之类的伪类是根据元素的显示状态定位和设置元素样式的伪类。

fullscreen伪类的例子:

<html>
<head>
<style>
   .sample {
      padding: 10px;
      height: 200px;
      width: 95%;
      background-color: lightgrey;
   }
   .sample p {
      visibility: hidden;
      text-align: center;
      color: black;
      font-size: 2em;
   }
   .sample:fullscreen {
      background-color: lightsalmon;
      width: 100vw;
      height: 100vh;
   }
   .sample:fullscreen p {
      visibility: visible;
   }
</style>
</head>
<body>
   <h2>:fullscreen example</h2>
   <div class="container"> 
      <div class="sample" id="sample">
      <p>Fullscreen mode</p>
      </div>
      <br>
      <button onclick="var el=document.getElementById('sample'); el.webkitRequestFullscreen();">Click here</button>
   </div>
</body>
</html>

:modal 伪类的例子:

<html>
<head>
<style>
   ::backdrop {
      background-image: url(border.png);
   }

   :modal {
      border: 8px inset blue;
      background-color: lightpink;
      box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
   }
</style>
</head>
<body>
   <dialog>
      <button autofocus>Close</button>
      <p>The modal dialog has a beautiful backdrop!</p>
      <p>And see my styling using :modal pseudo-class</p>
   </dialog>
   <button>Open the dialog</button>

   <script>
      const dialog = document.querySelector("dialog");
      const showButton = document.querySelector("dialog + button");
      const closeButton = document.querySelector("dialog button");

      //"显示对话框"按钮以模态方式打开对话框
      showButton.addEventListener("click", () => {
      dialog.showModal();
      });

      //"关闭"按钮关闭对话框
      closeButton.addEventListener("click", () => {
      dialog.close();
      });
   </script>
</body>
</html>

Input伪类

以下部分中的示例显示了以<input>元素为目标和样式的伪类，并允许基于 HTML 属性选择元素，以及元素在用户交互之前和之后的状态。
:autofill 伪类的示例：

<html>
<head>
<style>
   label {
      display: block;
      margin-top: 1em;
   }
   input {
      border: 3px solid grey;
      border-radius: 3px;
   }

   input:-webkit-autofill {
      border: 3px solid green;
      background-color: yellow;
   }

   input:autofill {
      border: 3px solid green;
      background-color: yellow;
   }
</style>
</head>
<body>
   <h3>:autofill example</h3>
   <form method="post" action="">
      <label for="name">First Name</label>
      <input type="first-name" id="name" />
      <label for="name">Last Name</label>
      <input type="last-name" id="name" />
      <label for="email">Email</label>
      <input type="email" name="email" id="email" autocomplete="email" />
   </form>
</body>
</html>

:enabled 伪类的例子:

<html>
<head>
<style>
	input[type=text]:enabled {
		background: white;
	}

	input[type=text]:disabled {
		background: lightgrey;
	}

	input {
		width: 150px;
		padding-left: 10px;
		margin-top: 10px;
		border: 1px solid black;
	}

   form {
      border: 2px solid black;
      width: 300px;
      padding: 10px;
   }
</style>
</head>
<body>
	<h2>:enabled example</h2>
	<form action="">
      <label>First Name</label>
      <input type="text"><br>
      <label>Last Name</label>
      <input type="text"><br>
      <label>Address</label>
      <input type="text" disabled="disabled" value="Address"><br><br>
      <button type="submit" disabled="disabled">Submit</button>
      <button type="reset">Reset</button>
	</form>
</body>
</html>

:disabled 伪类的例子:

<html>
<head>
<style>
	input[type=text]:enabled {
		background: white;
	}

	input[type=text]:disabled {
		background: lightgrey;
	}

	input {
		width: 150px;
		padding-left: 10px;
		margin-top: 10px;
		border: 1px solid black;
	}
</style>
</head>
<body>
	<h2>:disabled example</h2>
	<form action="">
      <label>Doctor Name</label>
      <input type="text"><br>
      <label>Hospital Name</label>
      <input type="text"><br>
      <label>Diagnosis</label>
      <input type="text" disabled="disabled" value="Diagnosis"><br><br>
      <button type="submit" disabled="disabled">Submit</button>
      <button type="reset">Reset</button>
	</form>
</body>
</html>

其它的伪类如 :read-only, :read-write, :placeholder-shown, :default, :checked, :indeterminate, :blank, :valid, :invalid, :in-range, :out-of-range, :required, :optional, 和:user-invalid.

语言伪类

反映文档语言并能够根据语言或脚本的方向选择元素的伪类就属于这一类。

:lang() 伪类的例子:

<html>
<head>
<style>
   :lang(en) > q {
      quotes: '""';
   }
   :lang(fr) > q {
      quotes: '« ' ' »';
      color: white;
      background-color: steelblue;
   }
   div {
      padding: 10px;
   }
</style>
</head>
<body>
   <h2>:lang() selector example</h2>
   <div lang="en">
   <q>Lorem ipsum is simply dummy text</q>
   </div>
   <div lang="fr">
   <q>Lorem ipsum is simply dummy text</q>
   </div>
</body>
</html>

位置伪类

与同一当前文档中的链接和目标元素相关的伪类属于此类伪类。
它们是:any-link、:link、:visited、:target 和:scope。下面显示了一些示例。

以下是使用 :any-link更改链接的前景色和背景色的示例：

<html>
<head>
<style>
   div {
      padding: 5px;
      border: 2px solid black;
      margin: 1em;
      width: 500px;
   }

   a:any-link {
      font-weight: 900;
      text-decoration: none;
      color: green;
      font-size: 1em;
   }

   .with-nohref {
      color: royalblue;
   }

   .with-empty {
      color: crimson;
   }
</style>
</head>
<body>
   <h3>:any-link example</h3>
   <div>
      anchor elements with href to yxjc123.com--
      <a href="https://yxjc123.com">点击这里</a>
   </div>
   <div>
      <a class="with-nohref">with no href</a>
   </div>
   <div>
      <a href="#" class="with-empty">with empty href</a>
   </div>
</body>
</html>

下面是 :link 伪类和 :hover 伪类的示例：

<html>
<head>
<style>
   a {
      font-size: 1em;
      padding: 5px;
      display: inline-block;
      margin-right: 10px;
   }

   a:link {
      background-color: lightyellow;
   }

   a:hover {
      background-color: lightsalmon;
      color: green;
   }
</style>
</head>
<body>
   <h2>:link selector 例子</h2>
   <strong><a href="https://www.yxjc123.com">yxjc123</a></strong>
   <strong><a href="https://www.google.com">Google</a></strong>
</body>
</html>

树结构伪类

根据元素在文档树中的位置来定位元素的伪类属于此类伪类。

它们是 :root, :empty, :nth-child, :nth-last-child, :first-child, :last-child, :only-child, :nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type 和 :only-of-type. 下面显示了一些示例。

以下是:empty伪类的示例，应用于 <p> 标记：

<html>
<head>
<style>
   p:empty {
      width: 200px;
      height: 30px;
      background: magenta;
   }
   div {
      border: 3px solid black;
      width: 300px;
      text-align: center;
   }
</style>
</head>
<body>
   <h2>:empty example</h2>
   <div>
   <p>Not an empty paragraph</p>
   <p></p>
   <p>Not an empty paragraph</p>
   </div>
</body>
</html>

以下是 :first-child 伪类的示例，应用于 <p> 父元素下的 <p> 标记。在此示例中，CSS 规则将仅适用于 <div> 元素中找到的第一个 <p> 元素，而同一容器中的其他 <p> 元素不受影响。

<html>
<head>
<style>
   p:first-child {
      color: black;
      background: yellow;
      font-weight: 600;
      font-size: 1em;
      font-style: italic;
      padding: 5px;
   }
   div {
      border: 2px solid black;
      margin-bottom: 5px;
   }
</style>
</head>
<body>
   <div>Parent element
      <p>first child looks different due to :first-child pseudo-class</p>
      <p>second child, so no change</p>
   </div>
   <div>Parent element
      <h2>h3 tag, so no change</h2>
      <p><p> tag, but not the first child.</p>
   </div>
</body>
</html>

以下是:only-of-type伪类的示例，应用于 <p> 和 <h2> 标记，位于 <div> 父元素下。在此示例中，CSS 规则仅适用于 <div> 父容器中找到的 <p> 和 <h2> 类型元素。

<html>
<head>
<style>
   .field {
      margin: 1px;
      padding: 1px;
   }

   p:only-of-type {
      color: darkblue;
      background-color: lightpink;
      padding: 5px;
   }

   h2:only-of-type {
      text-decoration-line: underline;
      color: green;
   }

   div {
      border: 2px solid black;
      width: 500px;
   }
</style>
</head>
<body>
   <div class="field">
      <h2>Heading 2 - only type</h2>
      <p>Paragraph tag - only type</p>
   </div>
   
   <div class="field">
      <h2>Heading 2 - only type</h2>
      <p>Paragraph tag 1 - we are two</p>
      <p>Paragraph tag 2 - we are two</p>
   </div>
</body>
</html>

用户操作伪类

所有这些伪类都需要一些用户交互或干预才能应用规则或样式，例如单击输入字段或将鼠标悬停在按钮上等。
这些伪类是 :active、:focus、:focus-visible、:focus-within 和 :hover。下面显示了一些示例。
下面是一个将焦点设置在链接上的示例：

<html>
<head>
<style>
    a {
        color: darkviolet;
        transition: all 0.3s ease;
    }

    a:focus {
        outline: none;
        color: red;
        background-color: yellow;
    }

    body {
        margin: 5px;
        padding: 2rem;
        display: grid;
        font: 20px/1.4 system-ui, -apple-system, sans-serif;
    }
</style>
</head>
<body>
    <p>The link here has a <a href="#0">change in background and foreground color</a> as it is focussed.</p>
</body>
</html>

这是一个示例，其中焦点设置在输入字段上，将焦点设置在其标签上，使用 :focus-within:

<html>
<head>
<style>
      label {
         display: block;
         font-size: 20px;
         color: black;
         width: 500px;
      }

      input[type="text"] {
         padding: 10px 16px;
         font-size: 16px;
         color: black;
         background-color: #fff;
         border: 1px solid #597183;
         border-radius: 8px;
         margin-top: 5px;
         width: 500px;
         transition: all 0.3s ease;
      }

      input[type="text"]:focus {
         background-color: lightyellow;
      }

      label:focus-within {
         font-size: 25px;
         color: red;
      }
</style>
</head>
<body>
      <form>
         <label>
         Full Name
         <input type="text">
         </label>
      </form>
</body>
</html>

以下是使用 :active 伪类更改按钮的边框、前景色和背景色的示例：

<html>
<head>
<style>
   div {
      padding: 1rem;
   }
   button {
      background-color: greenyellow;
      font-size: large;
   }
   button:active {
      background-color: gold;
      color: red;
      border: 5px inset grey;
   }
</style>
</head>
<body>
      <h3>:active example - button</h3>
      </div>   
         <button>Click on me!!!</button>
      </div>
</body>
</html>

函数式伪类

列出的伪类充当函数并接受选择器列表或宽容选择器列表作为参数。它们是:is()、:has()、:not() 和:where()。

下面是 :is() 函数伪类的示例，其中 :is 伪类应用于 h1、h2、h3 和 a 等元素。因此，无论在哪里找到这些元素，都会应用适当的样式：

<html>
<head>
<style>
   body {
      font: 300 90%/1.4 system-ui;
      margin: 1rem;
   }
   main :is(h1, h2, h3) {
      color: green;
   }
   main :is(a) {
      color: red;
      font-size: large;
   }
</style>
</head>
<body>
   <main>
      <h1>:is() 伪类函数示例</h1>
      <h3>君不见，黄河之水天上来，奔流到海不复回。</h3>
      <a href="">君不见，高堂明镜悲白发，</a>. <p>朝如青丝暮成雪。</p>
      <h2>人生得意须尽欢，莫使金樽空对月。</h2>
      <p>天生我材必有用，千金散尽还复来。</p>
      <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
      <h3>岑夫子，丹丘生，将进酒，杯莫停。</h3>
      <p>与君歌一曲，请君为我倾耳听。</p>
      <p>钟鼓馔玉不足贵，但愿长醉不愿醒。 <a href="">test</a> 古来圣贤皆寂寞，惟有饮者留其名。</p>
   </main>
</body>
</html>

以下是:not() 伪类的示例，其中由于 :not(h1)，使用 .sample 类定义的样式未应用于 h1 元素：

<html>
<head>
<style>
   .sample {
      text-shadow: 2px 2px 3px yellow;
   }

   /* <h1> 元素不在类 '.sample' 中 */
   h1:not(.sample) {
      background-color: lightblue ;
   }

   /* 不是 <h1> 元素的元素 */ 
   body :not(h1) {
      text-decoration-line: line-through;
   }

   /* 不是 <div> 和 <span> 元素的元素 */
   body :not(div):not(span) {
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>heading with :not(.sample) pseudo-class applied</h1>
   <h1 class="sample">heading with styling applied</p>
   <p>Paragraph, hence :not(h1) and :not(div):not(span) applied.</p>
   <div>div element, hence :not(h1) applied.</div>
</body>
</html>

下表列出了所有 CSS 伪类：

伪类	说明	示例
:active	表示已被用户激活的元素。	a:active{}
:any-link	表示充当超链接源锚点的元素，与是否被访问过无关 .	a:any-link{}
:autofill	匹配由浏览器自动填充值的元素。	input:autofill{}
:checked	匹配选中或切换的任何单选、复选框或选项元素。	input:checked{}
:default	选择一组相关元素中默认的表单元素。	input:default{}
:define	表示已定义的任意元素 .	nootransLcustom-elementnootransR:已定义{}
:disabled	表示禁用的元素。	input:disabled{}
:empty	匹配没有子元素的元素。	div:empty{}
:enabled	表示激活后已启用的元素。	input:enabled{}
:first	表示打印文档的第一页，带有@page at规则。	@page:first{}
:first-child	代表第一个一组兄弟元素中的元素。	li:first-child{}
:first- of-type	表示一组同级元素中该类型的第一个元素。	p:first-of-type{}
:fullscreen	匹配当前以全屏模式显示的元素。	#id:fullscreen{}
:focus	表示已接收到的元素焦点。	input:focus{}
:foucs-visible	当元素匹配 :focus 伪类或接收焦点时应用。	input:focus-visible{}
:focus-within	如果某个元素或其任何后代获得焦点，则匹配该元素。	label:focus-within{ }
:has()	这表示一个元素，如果有任何相对选择器。	:has()
:host	这会选择包含在其中使用的 CSS 的影子 DOM 的影子主机。	:host{}
:host()	此函数选择包含在其中使用的 CSS 的影子 DOM 的影子主机。	:host()
:host-context()	此函数允许您基于自定义元素设置样式在其祖先元素的类或属性上。	:host-context()
:hover	当用户使用鼠标等定点设备与元素交互时匹配，但不一定激活它。	button:hover{}
:indeterminate	表示状态不确定或未知的任何表单元素。	input:inminated{}
:in-range	代表一个当前值在范围限制内的元素。	input:in-range{}
:invalid	表示内容无法验证的任何元素。	input:invalid{}
:is()	将选择器列表作为参数，并选择该列表中的选择器之一可以选择的任何元素。	:is(ol, ul){}
:lang()	根据定义的语言匹配元素。	*:lang(en){}
:last-child	表示一组同级元素中的最后一个元素。	li:last-child{}
:last-of-type	表示组中该类型的最后一个元素同级元素的数量。	p:last-of-type{}
:left	表示打印文档的所有左侧页面，与 @page at-rule 一起使用。	@page:left{}
:link	表示尚未访问过的元素。	a:link{}
:modal	匹配处于排除与其外部元素的所有交互直到交互被消除的状态的元素。	:modal{}
:not()	表示与选择器列表不匹配的元素。	p:not （strong）{}
:nth-child()	选择子元素根据它们在父元素内所有兄弟元素中的位置。	li:nth-child(-n+3){}
:nth-last-child()	根据元素在同级元素中的位置进行匹配，从最后一个（末尾）开始计算	li:nth-last-child(odd){}
:nth-last-of-type()	根据相同类型兄弟元素中的位置来匹配元素，从最后一个（末尾）开始计数。	dd:nth-last-of-type(3n){ }
:nth-of-type()	根据元素匹配元素相同类型兄弟姐妹中的位置。	dd:nth-of-type(even){}
:only-child	表示没有任何兄弟元素的元素。	li:only-child{}
:only-of-type	表示没有相同类型同级的元素。	a: only-of-type{}
:optional	表示一个元素未设置必需属性。	input:optional{}
:out-of -range	表示当前值超出范围限制的元素。	input:out-of-range{}
:picture-in-picture	匹配当前处于画中画模式的元素。	:picture-in-picture{}
::placeholder-shown	表示当前显示占位符文本的任何元素。	input:placeholder-shown{}
:read-only	表示用户不可编辑的元素。	textarea:read-only{}
:read-write	表示用户可编辑的元素。	textarea: read-write{}
:required	表示具有required的元素对其设置属性。	input:required{}
:right	表示打印文档的所有右侧页面，与 @page at-rule 一起使用。	@page:right{}
:root	匹配文档树的根元素。	:root{}
:scope	表示作为选择器匹配的参考点或范围的元素。	:scope{}
:target	代表 id 与网址片段匹配的目标元素。	p:target{}
:valid	表示内容验证成功的任何元素。	input:valid{}
:visited	链接被访问后应用。	a:visited{}
:where()	将选择器列表作为参数并选择任何匹配的元素。	:where(ol, ul){}