Kolejność specyficzności klasy CSS
Zdefiniowałem własną klasę CSS:
.my-ui-table td {
border-width: 1px;
border: 0;
padding: 5px 10px;
border-style: hidden;
border-color: inherit;
}
Domyślny css PrimeFaces definiuje własną klasę, która jest stosowana do:
.ui-panelgrid td {
border-width: 1px;
border-style: solid;
border-color: inherit;
padding: 4px 10px;
}
Obie klasy są stosowane do tabeli:
<table class="ui-panelgrid ui-widget my-ui-table" role="grid">...</table>
Gdy Chrome renderuje wspomnianą tabelę, styl obramowania z klasy ui-panelgrid ma pierwszeństwo przed stylem granicznym zdefiniowanym w klasie my-ui-table. Czytałem o specyficzności CSS i sposób, w jaki wydaje się być specyficzny, jest taki sam dla obu definicji klas, więc ten określony jako ostatni w atrybucie class = "" powinien wygrać. Dlaczego tak się nie dzieje?
EDYCJA: tag głowy 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>
.