Wie eine spezifischere css

Question

Ich habe folgende HTML (Teil von HTML, die von primefaces für eine Kalenderkomponente erzeugt wird) schreiben

<td class=" ui-datepicker-unselectable ui-state-disabled rbn-checkout-date"> 
    <span class="ui-state-default">19</span> 
</td> 

I Überschreibung haben CSS durch primefaces angewendet folgende

.ui-widget-content .ui-state-disabled { 
    opacity: 1; 
    filter: alpha(opacity = 100); /* For IE8 and earlier */ 
} 

Aber Ich muss es spezifischer machen, indem ich den Klassennamen "rbn-checkout-date" benutze, den ich im "td" definiert habe.

Aber wenn ich folgendes zum css hinzufüge, trifft es nicht zu. Das CSS wird nicht einmal im Firebug-Stil angezeigt.

.ui-widget-content.ui-state-disabled.rbn-checkout-date { 
    opacity: 1; 
    filter: alpha(opacity = 100); /* For IE8 and earlier */ 
} 

css Pfad des Elements <td> ist wie folgt.

html body form#form table.rb-month-select-wrap tbody tr td div#form:calwrap span#form:cal.ui-calendar div#form:cal_inline.hasDatepicker div.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all.ui-datepicker-multi-2.ui-datepicker-multi div.ui-datepicker-group.ui-datepicker-group-first table.ui-datepicker-calendar tbody tr td.ui-datepicker-unselectable.ui-state-disabled.rbn-checkout-date 

Answer 1

Benötigt ein Leerzeichen zwischen den Klassen 'ui-widget-content' und 'ui-state-disabled'. Sonst ist ihre Suche nach den Klassen auf dem ‚.ui-Widget-content‘ Element, anstatt in ihn:

.ui-widget-content .ui-state-disabled.rbn-checkout-date { 
    opacity: 1; 
    filter: alpha(opacity = 100); /* For IE8 and earlier */ 
} 

Answer 2

Das einzige Problem, das ich sehen kann der Mangel an Räumen zwischen den Selektoren ist. Versuchen Sie Folgendes:

.ui-widget-content .ui-state-disabled.rbn-checkout-date { 
    opacity: 1; 
    filter: alpha(opacity = 100); /* For IE8 and earlier */ 
}