Question

我正在设计jQuery datepicker的样式。我无法使用jQuery主题，因为它破坏了我网站的其余部分。

我已经把所有工作都期待了一点 - 突出当天。

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

<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，这样我就不会在悬停时失去我的亮点？

感谢。

Answer 1

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

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

Answer 2

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

帮助CSS选择器（jQuery datepicker）

2 个答案: