我正在建设网站一段时间,但我对CSS确实有个疑问。因此,当多个类影响一个DOM元素,并且两个类都声明相同的属性时,就会出现这种情况。例如:
.first {
color:white;
}
.second {
color:black;
}
我知道如果我有一个
class="first second"
元素,则文本将为黑色。如果我希望它是白色的,我有几种选择:使用
!important
:我知道这很方便并且可以使用,但是有时候,如果我经常使用它,我的CSS可能会变得混乱。我的意思是,多个!important可以导致相同的基本情况。内联对类进行重新排序:如果我是对的,那么哪个类排在第一位,它将是优先级。很好,但是我经常在不影响它的环境中工作。其次,这不是一个全局的解决方案,而是一个局部的解决方案。
重新排列CSS本身:好吧,这听起来很有趣,但是如果我使用很多样式表(而且确实如此),就很难跟踪,尤其是在WIP时。
实际上,我正在寻找的是类似
z-index
的解决方法,但是可以优先确定哪个类更强。因为我在该主题中找不到真正有用的东西,所以我很好奇,也许这是用户错误,并且你们知道我没有的东西。您如何处理?你有什么建议? 最佳答案
class="first second"
与class="second first"
相同。优先级基于声明在CSS中的位置,而不是在html元素上的位置。
因此,如果您要相对于另一个类优先级,请将最高优先级LAST放在css文件中。
.first {
color:white;
}
.second {
color:black;
}
在此示例中,类
second
始终优先于类first
。发生这种情况是因为浏览器从上到下扫描css并始终应用找到的匹配类的规则。因此,最后一个匹配的类比以前的匹配的类具有优先级。看到这个小提琴:http://jsfiddle.net/5c29dzrr/
关于css - 设置CSS属性的优先级,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25487828/