如何编写更具体的 css答案

【问题标题】：How to write a more specific css如何编写更具体的 css
【发布时间】：2016-07-29 05:53:02
【问题描述】：

我有以下 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 样式窗格中。

.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

【问题讨论】：

标签： html css primefaces

【解决方案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 */
}

【讨论】：

【解决方案2】：

我能看到的唯一问题是选择器之间缺少空格。试试这个：

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

【讨论】：