Как написать более конкретные CSS

Question

я следующий HTML (часть HTML, создавшего по primefaces для календарного компонента)

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

Я переопределение следующий CSS применяется primefaces

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

Но Мне нужно сделать его более конкретным, используя имя класса «rbn-checkout-date», которое я определил в «td»

Но когда я добавляю следующее в css, оно не применяется. Этот css даже не отображается в панели стиля firebug.

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

css путь <td> Элемент выглядит следующим образом.

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

Нуждается в пробеле между классами «ui-widget-content» и «ui-state-disabled». В противном случае его ищет классы на элементе «.ui-виджет-контент», а не в ней:

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

Answer 2

Единственная проблема, которую я вижу, это отсутствие пробелов между селекторами. Попробуйте следующее:

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