div包含多个CSS，CSS的优先级顺序如何定义的

骑猪看日落 2023-07-24 02:59 3阅读 0赞

# 【问题描述】 #

代码如下，一个div包含2个css样式，分别是s1，s2

运行上面这个代码，发现字体颜色是蓝色。

于是更换class顺序如下：

<div class="s1 s2">
    		看看是什么颜色？
    	</div>

仍然是显示蓝色。

那么怎么样按照自己的想法，将字体显示为红色？

# 【解决方案】 #

查阅了各种资料，多个css中间的优先级，是由定义样式的时候决定，即后定义的样式会覆盖前面的样式，

跟在class中的顺序没有关系，因此，修改代码如下：

OK，已经实现了功能。

# 【重要扩展】 #

按照上面的说法，我们应用layui样式的时候，在样式后添加样式肯定应该有效吧，我们看一下：

但发现将.man-header放在任何地方都不生效，那问题原因在哪里呢？

再仔细看一下优先级描述：

优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个对应相应匹配表达式的权重值.

如果优先级相同,元素最终会应用 CSS 中靠后的声明。

那会不会是man-header的优先级太低呢？

查看layui.css代码，其中layui-header样式设置如下：

.layui-layout-admin .layui-header{background-color: #23262E;}

样式前面多了一个.layui-layout-admin。

于是修改代码：

OK，成功！

因此对于学习layui时，也要关注源码，这样才能随心所欲的进行修改。

还没有评论，来说两句吧...