類選擇器的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子對象

回答

相關問題