CSS class specificity order

问题

I have defined my own CSS class:

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

Default PrimeFaces css defines its own class that is being applied to :

.ui-panelgrid td {
border-width: 1px;
border-style: solid;
border-color: inherit;
padding: 4px 10px;
}

Both classes are being applied to table:

<table class="ui-panelgrid ui-widget my-ui-table" role="grid">...</table>

When Chrome renders said table the border-style from ui-panelgrid class takes precedence over border-style defined in my-ui-table class. I have been reading up on CSS specificity and the way it seems to be specificity is the same for both classes definitions, so the one specified last in class="" attribute should win. Why isnt this happening?

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

回答1:

It's not which one comes first in your class="..." order that matters, it's which one is written last in your css rules that matters. That's why its called cascading style sheets, cuz the last relevant rule, with equal or higher specificity will be applied. So if all your rules are in an external sheet and if they have equal specificity, the last one will be applied. But inline/ internal styles take precedence over external ones. (Though this doesn't mean you should use them)

来源：https://stackoverflow.com/questions/14899907/css-class-specificity-order

标签

css

primefaces