Question

是否可以仅为自定义类的后代生成样式？我想为我的DOM元素的后代重写一些jQuery UI样式。

像

这样的东西

.myStuff .ui-button {font-size: 0.7em !important;}

<div class="myStuff">
  <input type="button"></input> !-- jQuery UI class .ui-button
</div>

<input type="button"></input> !-- .ui-button not effected by my .ui-button style

我已经尝试了子选择器（＆gt;），但它在第一级停止:(。我实际上认为带有空格的双层语法是正确的...但它也不起作用。< / p>

这些是我试图从jQuery UI覆盖的确切选择器：

.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
.ui-widget-header a { color: #222222/*{fcHeader}*/; }

我真的只是想改变字体大小...我会尝试按照你的例子来计算它，但我昨天没有运气：（。

Answer 1

你的CSS看起来没问题，这应该有效，但我相信你可能是CSS specificity的受害者。如果你打开jQuery UI样式表文件，我相信你会看到你要覆盖的CSS规则的选择器比CSS规则更具体，因此占优势并将用于支持你的规则。 / p>

为了能够覆盖它，你必须添加一个你自己的CSS规则，它具有比jQuery UI提供的规则更大的特异性。

<强>更新

在这种情况下很难给出一个如何覆盖规则的确切示例，因为我们不知道选择器如何查找我们想要覆盖的规则。但是，一般的想法是，您必须计算要覆盖的规则的特异性（请参阅上面链接的Smashing Mag文章，如何执行此操作），然后确保您的规则特异性大于要覆盖的规则的特异性。有几种方法可以实现此目的，例如，为选择器添加额外的类或ID。

我想在你的情况下最简单的方法是打开jQuery UI样式表，找到你想要覆盖的规则，复制他们正在使用的确切选择器，使用那个选择器并在你的{{1你应该有一个比jQuery UI提供的规则更具体的规则。

此外，我不建议使用.myStuff来解决此问题。这是我个人的观点，但是如果你开始使用！important，那么当你尝试修改CSS时，你可能会陷入痛苦的世界。如果您使用！important指定规则来破坏CSS的正常流程，那么对错误布局进行故障排除可能非常困难。

Answer 2

是的，您的示例将有效。

.myStuff .ui-button {some custom style}

但是，请使用Chrome的开发人员工具（或FF或IE）检查dom，以确认您使用的是正确的选择器。 jQuery UI可以为各种小部件添加大量的dom元素。

CSS类选择器的子代

2 个答案: