css权重进阶

最新推荐文章于 2024-09-12 16:25:48 发布

Farer1

最新推荐文章于 2024-09-12 16:25:48 发布

阅读量125

点赞数

文章标签： css sass elementui

本文链接：https://blog.csdn.net/Farer1/article/details/121743234

版权

权重的设置

相同的选择器：内联（行内）>内部>外部>标签>通配符
不容选择器的优先级： id>class>标签>通配符

<style>
        .divstyle {
            color: red;
        }

        div {
            color: royalblue;
        }

        /* #idstyle {
            color: seagreen;
        } */
    </style>
</head>

<body>
    <div class="divstyle" id="idstyle">

    </div>

说明：打开显示器绿色，id如果去掉显示红色，class再去掉显示蓝色

css权重的计算

演示：

说明：权重的计算是执行每个选择器对于的数值，谁打就用谁，如果一样大，就近原则

css的多级选择器

已经学过的选择器

id
class
HTML标签
*

多级选择器的语法

.div .div2()

说明：在class为div里所有后代（子孙）元素为class=div2的标签被选择

示例：

说明：多级选择器在权重上时通过每个选择器的权重值累加后得到的最终值

除了以上的标签外还有如下多级标签

绝对子标签>

用 > 表示，例：div > p ，父标签下的第一级子标签

<div>
<p></p>亲儿子，最近一级
<a></a>
</div>

说明：绝对子标签视具体定位到我们所需要使用的样式上，优先级高于单独定义

相邻子标签（向下兄弟标签）+

元素1+元素2{样式}

如果中间相隔了一个标签就不会起作用，他必须是相邻的

兄弟标签（兄弟向下标签）

演示：

注意：

绝对子标签：是当前标签的直接一级子标签，后续标签不再受控制
相邻标签：当前标签的直接下一个兄弟标签，如果此兄弟标签和定义的一致则起效果。如果下一级没有任何

Farer1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css权重进阶

权重的设置相同的选择器：内联（行内）>内部>外部>标签>通配符不容选择器的优先级： id>class>标签>通配符<style> .divstyle { color: red; } div { color: royalblue; } /* #idstyle { color: seagree
复制链接

扫一扫