我已经定义了自己的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>
.
不是哪一个在你的班级中首先出现="......"这个重要的顺序,哪一个在你的css规则中最后写的重要.这就是为什么它的所谓级联样式表,因为最后一个相关规则,具有相同或更高的特异性将被应用.因此,如果您的所有规则都在外部工作表中,并且如果它们具有相同的特异性,则将应用最后一个规则.但内联/内部样式优先于外部样式.(虽然这并不意味着你应该使用它们)