CSS类特异性顺序 [英] CSS class specificity order
问题描述
我定义了我自己的CSS类：
I have defined my own CSS class:
.my-ui-table td {
border-width: 1px;
border: 0;
padding: 5px 10px;
border-style: hidden;
border-color: inherit;
}
默认PrimeFaces css定义了自己的类，该类将应用于：
Default PrimeFaces css defines its own class that is being applied to :
.ui-panelgrid td {
border-width: 1px;
border-style: solid;
border-color: inherit;
padding: 4px 10px;
}
两个类都应用于表：
<table class="ui-panelgrid ui-widget my-ui-table" role="grid">...</table>
当Chrome呈现上述表格时，ui-panelgrid类的边框样式优先于定义的边框样式在my-ui-table类中。我一直在阅读CSS特定性，这两个类定义的特定性似乎都是相同的，因此应该在class =属性中最后指定一个。为什么不发生这种情况？
When Chrome renders said table the border-style from ui-panelgrid class takes precedence over border-style defined in my-ui-table class. I have been reading up on CSS specificity and the way it seems to be specificity is the same for both classes definitions, so the one specified last in class="" attribute should win. Why isnt this happening?
编辑：HTML头标记：
HTML head tag:
<head>
<link type="text/css" rel="stylesheet" href="/webapp/do/javax.faces.resource/my.css?ln=css">
<link type="text/css" rel="stylesheet" href="/webapp/do/javax.faces.resource/primefaces.css?ln=primefaces">
</head>
。
推荐答案
重要的不是您的class = ...顺序中哪个是第一位，最后一个是哪个在您的CSS规则中很重要。这就是为什么要应用其称为级联样式表的原因，因为它是最后一个相关的规则，具有相同或更高的特异性。因此，如果您的所有规则都在外部表中，并且具有相同的特异性，则将应用最后一条。但是内联/内部样式优先于外部样式。 （尽管这并不意味着您应该使用它们）
It's not which one comes first in your class="..." order that matters, it's which one is written last in your css rules that matters. That's why its called cascading style sheets, cuz the last relevant rule, with equal or higher specificity will be applied. So if all your rules are in an external sheet and if they have equal specificity, the last one will be applied. But inline/ internal styles take precedence over external ones. (Though this doesn't mean you should use them)
这篇关于CSS类特异性顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
