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甚至没有出现在萤火虫风格的窗格中。

.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 */
}

Answer 2

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

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

如何写一个更具体的CSS

2 个答案: