Question

我已经定义了自己的CSS类：

.my-ui-table td {
border-width: 1px;
border: 0;
padding: 5px 10px;
border-style: hidden;
border-color: inherit;
}

默认PrimeFaces css定义了自己应用于的类：

.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类的border-style优先于my-ui-table类中定义的border-style。我一直在阅读CSS特异性，它的两种类定义的特殊性是相同的，所以在class =“”属性中最后指定的那个应该获胜。为什么不发生这种情况？

编辑：HTML标题：

<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>

。

Answer 1

不是哪一个在你的班级中排在第一位=“......”这个重要的顺序，哪一个在你的css规则中最后写的重要。这就是为什么它的所谓级联样式表，因为最后一个相关规则，具有相同或更高的特异性将被应用。因此，如果您的所有规则都在外部工作表中，并且如果它们具有相同的特异性，则将应用最后一个规则。但内联/内部样式优先于外部样式。（虽然这并不意味着你应该使用它们）

CSS类特异性顺序

1 个答案: