类选择器的CSS子对象

是否可以仅为自定义类的后代生效样式？我想为我的DOM元素的后代重写一些jQuery UI样式。类选择器的CSS子对象

喜欢的东西

.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

我已经试过子选择器（>），但它停靠在第一级:(。我却认为与空间的双重类的语法是正确的？。但它也不起作用

这些都是我试图从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}*/; }

我真的只是想改变字体大小...我会尽力到约按照你的例子来操作它，但是我昨天没有运气:(。

来源

2012-01-23 farina

什么“具有空间的双类语法”？ – BoltClock

我正在谈论.myStuff .ui-button。两个CSS类都有一个空格。我认为它暗示了第一类的后代。 – farina

你的CSS看起来很好，应该可以工作，但我相信你可能是CSS specificity的受害者。如果您打开jQuery UI样式表文件，我相信您会看到您要覆盖的CSS规则的选择符比CSS规则更具体，因此占上风，并将用于支持您的规则。

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

更新

很难给出如何重写规则在这种情况下，因为我们不知道该如何选择查找，我们要重写规则做一个确切的例子。然而，总的想法是，你将不得不计算你想覆盖的规则的特殊性（参考上面链接的Smashing Mag文章，以及如何做到这一点），然后确保你的规则特异性大于您要覆盖的规则的特异性。有几种方法可以实现这一点，例如为选择器添加额外的类或ID。

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

此外，我不会推荐使用!important来解决这个问题。这是我个人的看法，但是如果你开始使用！important，那么当你尝试修改你的CSS时，你可能会遇到一个痛苦的世界。如果您的规则使用！important重要，会破坏CSS的正常流程，故障排除故障布局可能非常困难。

来源

2012-01-23 21:47:35

+1好答案......但给一个更具体的规则编写的例子... –

是的，我认为这是答案，但我需要找出所有的分层CSS，以便我可以覆盖它。我已经尝试了大约15个不同的课程......他们都没有工作。如果我在我的css文件中使用.ui-widget {font-size：0.7em！important;}，它可以工作，但是如果我这样做.myStuff .ui-widget {font-size：0.7em！important;}它不会。 – farina

@ j-man86难以举一个例子，当你不知道你想重写规则的选择器是怎么样的，但至少我已经用一些额外的信息更新了我的答案。 –

是的，你的例子将工作。

.myStuff .ui-button {some custom style}

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

来源

2012-01-23 21:40:01 jrummell

类选择器的CSS子对象

回答

相关问题