Orden de especificidad de clase CSS
He definido mi propia clase de CSS:
.my-ui-table td {
border-width: 1px;
border: 0;
padding: 5px 10px;
border-style: hidden;
border-color: inherit;
}
Predeterminado PrimeFaces css define su propia clase que se aplica a:
.ui-panelgrid td {
border-width: 1px;
border-style: solid;
border-color: inherit;
padding: 4px 10px;
}
Ambas clases se están aplicando a la tabla:
<table class="ui-panelgrid ui-widget my-ui-table" role="grid">...</table>
Cuando Chrome presenta dicha tabla, el estilo de borde de la clase ui-panelgrid tiene prioridad sobre el estilo de borde definido en la clase my-ui-table. He estado leyendo sobre la especificidad de CSS y la forma en que parece ser la especificidad es la misma para las definiciones de ambas clases, por lo que el atributo especificado por última vez en class = "" debería ganar. ¿Por qué no está sucediendo esto?
EDITAR: 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>
.