html - 如何编写更具体的 css

Question

我有以下 HTML(由 primefaces 为日历组件生成的 html 的一部分)

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

我已经覆盖了 primefaces 应用的 css

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

但我需要使用我在“td”中定义的类名“rbn-checkout-date”使其更具体

但是当我向 css 添加以下内容时，它不适用。该 css 甚至没有显示在 Firebug 样式 Pane 中。

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

<td> 的 css 路径元素如下。

 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-widget-content”元素上而不是在其中寻找类:

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