CSS伪类选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/laurel_y/article/details/70212761

本文详细介绍了CSS中常用的伪类选择器，如:hover、:active等，并深入探讨了:nth-child(n)及其变形的选择器用法，包括如何通过特定公式(an+b)来精确选取元素。

（1）建一个文档来记录我见过的伪类选择器，便于自己以后查找，后续会继续添加。

选择器语法	定义
:hover	用于选择鼠标指针浮动在上面的元素
:active	用于选择处于激活状态的元素
:first-letter	用于选择文本的第一个字母
::selection	用于匹配用户选取的部分
:nth-child(n)	选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
:last-child	同上，用于选取属于其父元素的最后一个标签

（2）关于:nth-child(n) 的补充说明：

odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

p:nth-child(odd){
    background:#ff0000;
}
p:nth-child(even){
    background:#0000ff;
}

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

<!DOCTYPE html>
<html>
<head>
    <style> 
        p:nth-child(3n+0){
            background:#ff0000;
        }
    </style>
</head>
<body>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <span>第二个段落。</span>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
    <p>第六个段落。</p>
    <p>第七个段落。</p>
    <p>第八个段落。</p>
    <p>第九个段落。</p>
</body>
</html>