CSS - 伪类

上一个

下一个

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

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

伪类属性的示例 iframe

悬停我！

什么是伪类？

伪类通常与CSS 选择器一起使用，在选择器后插入一个冒号 (:)。例如 a : hover{}，此处选择器 `a` 将选择文档中的所有锚标记。
函数式伪类包含一对括号来定义参数。例如：:lang(en)。
附加伪类的元素称为锚元素。例如：button:hover, a:focus, 等。此处 button 和 a 元素称为锚元素。
伪类根据文档树的内容为元素应用样式。
伪类还会根据外部因素（例如元素导航的历史记录（: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;
}

示例

这是一个显示伪类活动的不同用法的示例。

<!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;
}

伪类 nth-child 可以将数字、数学表达式或奇数、偶数等值作为参数。要了解与第 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 中使用 first-child 伪类。

<!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 用于选择最后一个直接子元素。

语法

tag:last-child {
   property: value;
}

示例

以下示例显示了如何在 HTML 中使用 last-child 伪类。

<!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	匹配浏览器自动填充其值的元素。	试试看
:checked	匹配任何已选中或切换的单选按钮、复选框或选项元素。	试试看
:default	选择在一组相关元素中为默认值的表单元素。	试试看
:defined	表示任何已定义的自定义元素。	试试看
:disabled	表示禁用的元素。	试试看
:empty	匹配没有子元素的元素。	试试看
:enabled	表示已启用的元素，在激活后。	试试看
:first	表示打印文档的第一页，使用 @page at-rule。	试试看
:first-child	表示一组同级元素中的第一个元素。	试试看
:first-of-type	表示一组同级元素中其类型中的第一个元素。	试试看
:fullscreen	匹配当前以全屏模式显示的元素。	试试看
:focus	表示已获得焦点的元素。	试试看
:focus-visible	在元素匹配 :focus 伪类或获得焦点时应用。	试试看
:focus-within	如果元素或其任何后代获得焦点，则匹配该元素。	试试看
:has()	如果任何相关的选择器，则表示此元素。	试试看
:host	这将选择包含其内部使用的 CSS 的 Shadow DOM 的 Shadow Host。	试试看
:host()	此函数选择包含其内部使用的 CSS 的 Shadow DOM 的 Shadow Host。	试试看
: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	表示没有设置 required 属性的元素。	试试看
:out-of-range	表示当前值超出范围限制的元素。	试试看
:picture-in-picture	匹配当前处于画中画模式的元素。	试试看
:placeholder-shown	表示当前显示占位符文本的任何元素。	试试看
:read-only	表示用户无法编辑的元素。	试试看
:read-write	表示用户可以编辑的元素。	试试看
:required	表示已设置 required 属性的元素。	试试看
:right	表示打印文档的所有右侧页面，与 @page at-rule 一起使用。	试试看
:root	匹配文档树的根元素。	试试看
:scope	表示作为选择器匹配参考点或范围的元素。	试试看
:target	表示其 id 与 URL 片段匹配的目标元素。	试试看
:valid	表示内容验证成功的任何元素。	试试看
:visited	链接被访问后应用。	试试看
:where()	以选择器列表作为参数，并选择匹配的任何元素。	试试看

打印页面