伪类和伪元素的一些总结

定义

伪类，更多的定义的是状态
常见的伪类有 :hover，:active，:focus，:visited，:link，:not，:first-child，:last-child等等

伪元素，不存在于DOM树中的虚拟元素，它们可以像正常的html元素一样定义css，但无法使用JavaScript获取
常见伪元素有 ::before，::after，::first-letter，::first-line等等

CSS3明确规定了，伪类用一个冒号(:)来表示，而伪元素则用两个冒号(::)来表示

伪类

表单校验

表单的校验中，常会用到 :required、:valid 和 :invalid 这三个伪类。

• :required，指定具有 required属性 的表单元素
• :valid，指定一个 匹配指定要求 的表单元素
• :invalid，指定一个 不匹配指定要求 的表单元素

<p>input中类型为email的校验</p>

<p>符合email校验规则</p>
<input type="email" required placeholder="请输入" value="24238477@qq.com" />
<br><br>

<p>不符合email校验规则</p>
<input type="email" required placeholder="请输入" value="lalala" />
<br><br>

<p>有required标识，但未填写</p>
<input type="email" required placeholder="请输入" value="" />

input {
    &:valid {
        border-color: green;
        box-shadow: inset 5px 0 0 green;
    }
    &:invalid {
        border-color: red;
        box-shadow: inset 5px 0 0 red;
    }
    &:required {
        border-color: red;
        box-shadow: inset 5px 0 0 red;
    }
}

折叠面板

用伪类 :target 来实现
:target 是文档的内部链接，即 URL 后面跟有锚名称 #，指向文档内某个具体的元素

<div class="t-collapse">
    <!-- 在url最后添加 #modal1，使得target生效 —>
    <a class="collapse-target" href="#modal1">target 1</a>
    <div class="collapse-body" id="modal1">
        <!-- 将url的#modal1 变为 #，使得target失效 —>
        <a class="collapse-close" href="#">target 1</a>
        <p>...</p>
    </div>
</div>

.t-collapse {
    >.collapse-body {
        display: none;
        &:target {
            display: block;
        }
    }
}

元素的index

用 :nth-child(n) 与 :nth-of-type(n) 来找到，并指定样式
n可以是大于零的数字，或者类似2n+1的表达式，再或者是 even / odd

:nth-of-type(n) 除了关注n之外，还需要关注最前面的类型，也就是标签
:nth-child(n) 它关注的是：其父元素下的第n个孩子，与类型无关

伪元素

antd的彩蛋事件

查看了生成的html，发现原来是 button 下藏了一个 ::before

.ant-btn {
    &::before {
        display: none !important;
    }
}

美化选中的文本

用 ::selection 来进行美化的

<p>Custom text selection color</p>
// 划过的部分美化为：红色的字体，并且底色变为了黄色
::selection {
    color: red;
    background-color: yellow;
}

附录

CSS3中的伪类

:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd) 、 :nth-child(even) 、 :nth-child(3n+1)
:first-child 、 :last-child 、 :only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd) 、 :nth-of-type(even) 、 :nth-of-type(3n+1)
:first-of-type 、 :last-of-type 、 :only-of-type

CSS3中的伪元素

::after 已选中元素的最后一个子元素
::before 已选中元素的第一个子元素
::first-letter 选中某个款级元素的第一行的第一个字母
::first-line 匹配某个块级元素的第一行
::selection 匹配用户划词时的高亮部分

参考原文： 「前端面试题系列3」伪类与伪元素的区别及实战