1.3优先级

这一片月

于 2022-09-11 11:16:50 发布

阅读量138

点赞数

分类专栏： css样式文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_62865634/article/details/126803099

版权

css样式专栏收录该内容

41 篇文章 1 订阅

订阅专栏

提示：在优先级选择器里面无穷大（优先级高）一次向上

继承或者“*”号	0,0,0,0
元素选择器	0,0,0,1
类选择器、伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内有样式style=“”	1,0,0,0
！important重要的	无穷大

优先级注意：

1、权重是有4组数字，但是不会有进位。

2、可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。

3、等级判断从左向右，如果一位数值相同，则判断下一位数值。

4、可以简单记忆法：

继承或者“*”为0

元素选择器为1

类和伪类选择器为10

ID选择器为100

行内样式style=""为1000

！important重要的为无穷大

其他没有说都为0，一共四组数字

5、继承的权重，如果元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

6、权重叠加：如果复合选择器，则会权重叠加需要计算权重，比如：

计算：div ul li ,所以这里的权重为3。

div	0,0,0,1
ul	0,0,0,1
li	0,0,0,1
	0,0,0,3

计算：.nav:hover ,所以这里的权重为11。

.nav	0,0,1,0
:hover	0,0,0,1
	0,0,1,1

计算：.nav ul li ,所以这里的权重为12。

.nav	0,0,1,0
ul	0,0,0,1
li	0,0,0,1
	0,0,1,2

注意：复合选择器会有权重叠加问题，权重虽然会叠加，但是永远不会进位。

自己代码展示：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级执行</title>
    <style>
        idv {
            /* 这个是元素标签 */
            color: pink !important;
        }
        
        .test {
            /* 这个是选择器 */
            color: red;
        }
        
        #demo {
            /* 这个就是id选择器 */
            color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="test" id="demo" style="color: purple">小猪佩奇</div>
    <!-- 在标签里面写style里写颜色表示行内样式 -->
    有一个等级优先顺序： 1.继承或者* 2.元素选择器 3.类选择器 为类选择器 4.id选择器 5.行内样式style=“color” 6.！important重要


</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级权重</title>
    <style>
        /* 复合选择器会有会有叠加问题
        权重虽然会叠加、有远不会进位 */
        
        li {
            /* 这个权重就是：元素标签选择器“0,0,0,1” */
            color: red;
        }
        
        ul li {
            /* 而这个就是两个元素选择器相加：
            0.0.0.1
            0.0.0.1
            结果就是
            0.0.0.2
            这个显示比上一个权重大优先执行这个 */
            color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>大猪蹄子</li>
        <li>大猪蹄子</li>
        <li>大猪蹄子</li>


    </ul>

</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级注意</title>
    <style>
        #father {
            /* 父类的权重是100 */
            color: red;
        }
        /* 所以以后我们看到标签执行那样式，就先看看这个标签有没有直接被选出来
        优先执行先选出来的标签
        就比如a标签必须选出来改颜色 */
        
        p {
            /* p继承的权重为0 */
            color: pink;
        }
        
        body {
            color: red;
        }
    </style>
</head>

<body>
    <div id="father">
        <p>你还是很好看</p>
        <!-- 比如我这个p标签、body指定这个样式样式、已经选出来标签并更改它的颜色、我们是优先级执行被选出来的标签 -->
    </div>
    <a href="#">我是单独的样式</a>
</body>

</html>

显示结果：