帮助 CSS 选择器 (jQuery datepicker)答案

【问题标题】：Help with CSS selectors (jQuery datepicker)帮助 CSS 选择器 (jQuery datepicker)
【发布时间】：2011-02-22 07:14:17
【问题描述】：

我很想为 jQuery 日期选择器设置样式。我不能使用 jQuery 主题，因为它破坏了我网站的其余部分。

我已经做好了一切准备工作 - 突出显示当天。

我遇到的问题是，当日期选择器首次加载时，当前日期显示如下：

<td class="ui-datepicker-days-cell-over  ui-datepicker-today">
    <a class="ui-state-default ui-state-highlight ui-state-hover" href="#">14</a>
</td>

当用户将鼠标悬停在其他任何一天上时，当天的ui-state-hover被删除，然后当天突出显示就可以了：

<td class="ui-datepicker-days-cell-over  ui-datepicker-today">
    <a class="ui-state-default ui-state-highlight" href="#">14</a>
</td>

悬停状态的 CSS 如下：

.ui-widget-content .ui-state-hover { ... }

加载时这会覆盖我的ui-state-highlight，它会突出显示当天。

我已经尝试过：

.ui-widget-content .ui-state-highlight .ui-state-hover { ... }

我认为它会优先匹配，因为它是一个更具体的选择器，但它不起作用。

所以问题是，我怎样才能让.ui-state-highlight .ui-state-hover 覆盖.ui-state-hover，这样我才不会在悬停时失去我的亮点？

谢谢。

【问题讨论】：

标签： html css css-selectors jquery-ui-datepicker

【解决方案1】：

不理想，但您可以将 !important 添加到选择器内的每个样式中，以使用您自己的样式覆盖它：

.ui-widget-content .ui-state-hover {
  color: '#00ff00' !important;
}

【讨论】：

【解决方案2】：

例如，您可以尝试添加元素以提高其在层次结构 td.ui-widget-content td.ui-state-hover 上的位置。此外，这可能不是最优雅的解决方案，但在 <style></style 标记内添加样式内联或在实际 html 页面上作为标题将优先于任何其他样式表，前提是它是最后调用的样式表。

【讨论】：