选择器的优先级

最新推荐文章于 2024-08-12 16:19:20 发布

XiaoSaurus77

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量19

点赞数

分类专栏： CSS 前端文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_50149096/article/details/133722899

版权

CSS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突

到底应用哪个样式，此时就需要看优先级了

简单描述：

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

详细描述：
- 计算方式：每个选择器都可计算一组权重，格式为：（a,b,c）

a： ID选择器的个数
b：类、伪类、属性选择器的个数
c：元素、伪元素选择器的个数

选择器	权重
ul>li	(0,0,2)
div ul>li h4	(0,0,4)
#title1,.title	(1,2,0)
#title1,.title,h4	(1,1,1)
#title1,.title,a:hover	(1,2,1)

比较规则：按照从左到右的顺序，一次比较大小，当前位胜出后，后面的不再对比，例如：

(1,0,0) > (0,2,2)
(1,1,0) > (1,0,3)
(1,1,3) > (1,1,2)

特殊规则：
- 行内样式权重大于所有选择器
- !important的权重，大于行内样式，大于所有选择器，权重最高
示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器优先级</title>

    <style>

        div {
            color: darkgray !important;
        }


        #container1.container h4 {
            color: chocolate;
        }

        #title1 {
            color: crimson;
        }

        .container h4 {
            color: aquamarine;
        }

        .title:hover {
            color: springgreen;
        }

        div>ul>li>h4::before {
            color: blueviolet;
            content: ":";
        }

        div>ul>li>h4 {
            color: blueviolet;
            content: ":";
        }

        #text1 {
            color: blue;
        }

        .text {
            color: tomato;
        }

        p {
            color: yellowgreen;
        }

        * {
            font-size: 20px;
            color: darkgray;
        }
    </style>

</head>

<body>

    <p id="text1" class="text" style="color: darkcyan;">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, blanditiis.
    </p>

    <br>
    <hr>
    <br>

    <div id="container1" class="container">
        <ul>
            <li>
                <h4 id="title1" class="title">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, assumenda. Ullam sapiente, aperiam
                    facilis eveniet odit quaerat. Ratione deleniti voluptates recusandae, harum repellat facere
                    dignissimos, perspiciatis sint minima, beatae blanditiis!
                </h4>
            </li>
        </ul>
    </div>

    <br>
    <hr>
    <br>
    
    <div style="color: blue;"> 
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci voluptatem iure inventore dolor obcaecati odit, in, doloremque numquam totam nulla reprehenderit, officiis voluptates voluptatum non aliquid fugiat culpa cupiditate itaque.
    </div>

</body>

</html>