伪类选择器

  1. 通过伪类关键字，选择到元素的特殊状态（可交互元素）。使得你可以根据外部事件来响应特定的样式。
  2. 伪类除了选择元素特殊状态，另一种用法相当于给元素增加一个内置的类名，可以帮你减少使用自定义类名，便于代码维护。

    UI元素状态伪类选择器

    :focus

    focus -n可交互元素：表单元素、、

语义选中元素聚焦状态的样式规则。

:focus-within

语义只要可交互子元素被聚焦，其父元素聚焦状态的样式规则就会启用。
例子点击元素时，样式规则也会被应用。

  1. <style>         
  2.     form:focus-within{
  3.       color: red;
  4.     }
  5. </style>
  7. <form action="">
  8.   <input type="text">
  9.   <input type="text">        
  10. </form>

:link

语义选中还没有点击访问过的链接。
关键点中/没有herf属性的链接，会忽略该选择器。
例子当新开页面时，所有的链接其实都处于未访问状态。同时选择器a:link的权重比a高，最终应用a:link中的规则。

a{
  color: black;            
}
a:link{
  color: red;
} 

<a id="dd">dd</a>        //没有herf属性的链接，不会被a:link选择器选中

:visited

语义选中已经访问过的链接。
关键点中/没有herf属性的链接，会忽略该选择器。

:hover

语义选中鼠标悬浮的链接

:active

语义鼠标正在点击，不抬起鼠标键的时间。

:target

语义标签锚点指向的目标元素。点击这个标签，对应的目标元素就会应用样式规则。
例子

<style> 
  .target:target{
    color: red;
  }   
</style>

<div id="a" class="target">target1</div>
<div id="b" class="target">target2</div>
<div id="c" class="target">target3</div>

<a href="#a">锚点1</a>
<a href="#b">锚点2</a>
<a href="#c">锚点3</a>

输出结果
image.png

:autofill

语义表单里的内容通过自动填充时，表单的样式。
例子

//浏览器内部自动填充时的用户代理样式，!important没法更改
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;

输出结果
image.png

:enabled、:disabled

语义表单元素中有disabled或者enable的属性时，伪类选择器才会选中元素。

:read-only、:read-write

语义表单元素中有readonly或者readwrite的属性时，伪类选择器才会选中元素。

例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 给可激活的元素，添加样式 */
        input:enabled {
            border: 3px solid rgb(255, 0, 21);           
        }
        /* 
        * 给禁用元素，添加样式
        * 如果样式生效，需要在<input>元素里加上disabled属性
         */
        input:disabled {
            border: 3px solid rgb(76, 0, 255);
        }
    </style>
</head>

<body>
    <div>       
      <form method="post" action="">
        <label for="email">Email</label> 
        <input type="email" name="email" id="email" autocomplete="email">
      </form>       
    </div>
</body>

</html>

:default

语义表单的默认样式。
例子多选框或单选框中有checked属性，会默认选择一个选项。default就是给这个默认选项添加样式。

:checked

语义多选、单选、下拉菜单表单，点击选中一个元素后，应用的样式。
关键点:default直接与checked属性相关联，而:checked属性只与用户的行为有关。

:valid、:invalid

语义数据输入确认无效或有效状态时的样式。
例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        input:invalid + span::before{
            content: '✖';
            color: red;
        }
        input:valid + span::before{
            content: '✓';
            color: green;
        }
    </style>
</head>

<body>    
        <form method="post" action="">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" autocomplete="email" required>
            <span></span>
        </form>     
</body>

</html>

:in-range、:out-of-range

语义输入值是否在某个数值范围内的元素状态。
关键点只应用于元素，并且有min、max属性，并且type类型的键盘输入值是数字，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input:in-range{
            color: black;
        }
        input:out-of-range{
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <form method="post" action="">            
            <input type="number" min='1' max="12"/>
            <span></span>
        </form>        
    </div>
</body>

</html>

:required

语义 选中有required属性的,