深入理解CSS3选择器及其优先级-CSDN博客

本文链接：https://blog.csdn.net/UserPython/article/details/106041141

本文详细介绍了CSS3中的各种选择器，包括基本选择器如标签选择器、ID选择器、类选择器和通用选择器，以及高级选择器如后代选择器、并集选择器、交集选择器和序列选择器。此外，还讨论了CSS的特性，如继承性、叠加性和层叠性，以及选择器的优先级规则。了解这些概念能帮助开发者更精确地控制网页样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3 选择器

基本选择器
高级选择器
序列选择器
- 第一和最后子元素选择器
- nth-child(N) 选择器
CSS特性及优先级

基本选择器

标签选择器

通过标签选择元素
无论标签隐藏多深，标签选择器都可以选中
选择的是所有相同标签，而不是一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
        div{font-size: 30px; color: red;}
        p{color: blue;}
    </style>
</head>
<body>
    <div>标签选择器</div>
    <header>
        <div>标签选择器2</div>
    </header>
    <p>标签选择器3</p>
</body>
</html>

ID选择器

id属性是标准属性，任何元素都可以有id属性
使用id选择器时，要在id值前加上“#”
id选择器只能选中一个元素，同一个页面要保证id的唯一性
定义id时，必须要以字母开头，可以包含数字、下划线等符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        li{color:orange}
        #one, #two{color:aqua; font-size:30px}
        #two{background: blue;}
    </style>
</head>
<body>
    <ul>
        <li id="one">id选择器1</li>
        <li id="two">id选择器2</li>
        <li>id选择器3</li>
    </ul>
</body>
</html>

类选择器

class属性是标准属性，任何元素都可以有class属性
使用类选择器时，要在class值前加上“.”
class选择器可以被多个选择共同使用，因为不同元素可以拥有相同的class值
同一个元素可以有多个类名，要使用空格隔开
css中尽量使用类选择器，js中尽量使用id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style type="text/css">
        ._class{color:chartreuse;}
        .abc{ font-size: 30px;}
    </style>
</head>
<body>
    <div>
        <div class="_class">类选择器</div>
        <p class="_class abc">类选择器2</p>
        <span class="_class">类选择器3</span>
    </div>

    <strong class="abc">类选择器4</strong>
</body>
</html>

通用选择器

可以选中页面中的所有元素
使用通配符 “*” 进行选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用选择器</title>
    <style type="text/css">
        *{color: cyan;}
    </style>
</head>
<body>
    <div>
        <a href="#">通用选择器</a>
        <p>通用选择器2</p>
        <span>通用选择器3</span>
    </div>
    <strong>通用选择器4</strong>
</body>
</html>

高级选择器

后代选择器

描述的是一种祖先结构关系，并不一定是父子关系
祖先和后代之间要有一个空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        .div1 .li2{color: cyan;}
    </style>
</head>
<body>
    <div class="div1">
        <ul class="ul1">
            <li class="li1">张三</li>
            <li class="li2">李四</li>
            <li class="li3">赵五</li>
            <li class="li4">王大</li>
        </ul>
    </div>
    <div class="div2">
        <ul class="ul2">
            <li class="li1">张三</li>
            <li class="li2">李四</li>
            <li class="li3">赵五</li>
            <li class="li4">王大</li>
        </ul>
    </div>
</body>
</html>

并集选择器

同时选中多个元素
选择时要用逗号“，”隔开
标签选择器，id选择器，class选择器等都可以使用
各选择器之间可以互换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style type="text/css">
        /* div,p{color: red;} */
        p,div,#one,.two{color: red;}
    </style>
</head>
<body>
    <div>并集选择器</div>
    <p>并集选择器2</p>
    <span id="one">并集选择器3</span>
    <p class="two">并集选择器4</p>
</body>
</html>

交集选择器

选择的元素要同时满足多个条件
选择器之间没有空格
标签选择器放在前，其他选择器在后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style type="text/css">
        div.abc{color: red;}
    </style>
</head>
<body>
    <div>交集选择器</div>
    <div class="abc">交集选择器2</div>
    <p class="abc">交集选择器3</p>
</body>
</html>

序列选择器

第一和最后子元素选择器

E:first-child 指定E元素，并且是父标签中的第一个子元素，两者同时成立，则选中E元素
E:last-child 指定E元素，并且是父标签中的最后一个子元素，两者同时成立，则选中E元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一和最后子元素选择器选择器</title>
    <style type="text/css">
        h3:first-child{color: red;}
        /* p:first-child{color: red;}不能匹配 */
        /* p:last-child{color: red;}不能匹配 */
        div:last-child{color: blue;}
    </style>
</head>
<body>
    <h3>子元素选择器1</h3>
    <h3>子元素选择器2</h3>
    <p>子元素选择器3</p>
    <p>子元素选择器4</p>
    <div>子元素选择器5</div>
    <div>子元素选择器6</div>
</body>
</html>

`nth-child(N)` 选择器

选择指定标签中父元素的第N个子元素
参数N可以是整数，odd奇数、even偶数、公式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nth-child选择器</title>
    <style type="text/css">
        /* li:nth-child(5){color: aqua;} */
        /* li:nth-child(odd){color: aqua;} */
        /* li:nth-child(even){color: red;} */
        /* li:nth-child(2n-1){color: aqua;} */

        /* 选择前6个 */
        /* li:nth-child(-n+6){color: aqua;} */

        /* 选择后4后面的所有元素 */
        /* li:nth-child(n+4){color:red} */

        /* 选择第3到第7之间的元素，可以使用交集选择器 */
        li:nth-child(n+3):nth-child(-n+7){color: red;}
    </style>
</head>
<body>
    <ul>
        <li>nth-child选择器1</li>
        <li>nth-child选择器2</li>
        <li>nth-child选择器3</li>
        <li>nth-child选择器4</li>
        <li>nth-child选择器5</li>
        <li>nth-child选择器6</li>
        <li>nth-child选择器7</li>
        <li>nth-child选择器8</li>
        <li>nth-child选择器9</li>
        <li>nth-child选择器10</li>
    </ul>
</body>
</html>

CSS特性及优先级

继承性

后代元素继承祖先元素的样式
只能继承文本样式，其它样式不能继承
color、background，text-开头，font-开头，line-开头，可以继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS继承</title>
    <style type="text/css">
        div{color: red; background: blue;}
        /* body{color: blue;} */
    </style>
</head>
<body>
    <div>
        我是div中的文字<br>
        <span>我是div中span元素</span>
    </div>
</body>
</html>

CSS叠加性和层叠性

当多个选择器选中的是同一个元素时，加的是不一样的样式，所有选择器都会生效 — CSS叠加性
当多个选择器选中的是同一个元素时，加的是一样的样式，只有一个选择器会生效 — CSS层叠性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS叠加性和层叠性</title>
    <style type="text/css">
        /* CSS叠加性 */
        /* span{color: red;}
        .abc{font-size: 30px;} */

        /* CSS层叠性 */
        span{color: red;}
        .abc{font-size: 30px; color: blue;}
    </style>
</head>
<body>
    <span class="abc">CSS叠加性和层叠性</span>
</body>
</html>

CSS优先级

继承样式 < 浏览器预设的样式 < 通用选择器 < 标签选择器 < 类选择器 < id选择器 < 后代id选择器 < 行内样式
选择的越精确，优先级越高
当优先级相同时，后写的样式会覆盖先写的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS优先级</title>
    <style type="text/css">
        div{color: red;}
        *{color: red;}
        a{color: blue;}
        .abc{color: blueviolet;}
        #one{color: chartreuse;}
        div #one{color: cyan;}
        /* div .abc{color: darkgoldenrod;} 不会生效 */
    </style>
</head>
<body>
    <div><a class="abc" id="one" style="color: darkorange;" href="">听谁的</a>
        <br>
        <span>听谁的2</span>
    </div>
</body>
</html>