css3-选择器-优快云博客

本文深入解析CSS中属性选择器、伪类选择器及伪元素选择器的使用方法，包括如何选择具有特定属性的元素、如何匹配元素的位置，以及如何在元素前后插入内容等关键技巧。

属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性值等于val的E元素
E[att^=“val”]	匹配具有att属性、且值以val开头的E元素
E[att$=“val”]	匹配具有att属性、且值以val结尾的E元素
E[att*=“val”]	匹配具有att属性、且值中含有val的E元素

类选择器、属性选择器、伪类选择器，权重为10
结构伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个元素E
E:last-child	匹配父元素中的最后一个元素E
E:nth-child（n）	匹配父元素的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

nth-child(n)
● n可以使数字、关键字和公式
● n如果是数字，就是选择第几个
● 常见的关键词有even偶数 odd奇数
● 常见的公式如下（如果n是公式，则从0开始计算，但第0个元素或者超出了元素的个数会被忽略）

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15…
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第5个）

注意：:nth-child(n)选择父元素里面的第n个标签，它不管里面的标签是否同一种类型
例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <style>
        /* div :nth-child(1) {
            background: coral;
        } */
        /* div span:nth-child(1) {
            background: coral;
        } */
        /* 这种写法无法选出“我是第二个” */
        
        div span:nth-child(2) {
            background: coral;
        }
        /*这种写法才生效*/
    </style>
</head>

<body>
    <div>
        <p>我是第一个</p>
        <span>我是第二个</span>
        <span>我是第三个</span>
        <span>我是第四个</span>
    </div>
</body>

</html>

伪元素选择器