2

我已经定义了自己的 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 类的边框样式优先于在 my-ui-table 类中定义的边框样式。我一直在阅读有关 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>

.

4

1 回答 1

6

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

于 2013-02-15T17:19:33.563 回答