複雜的CSS選擇器 - 使用「和」與類選擇器

我希望實現下面的等效CSS選擇，而不用括號括起來，但由於不能用括號括起來改變CSS中的操作順序。複雜的CSS選擇器 - 使用「和」與類選擇器

.portion-of-html (thead,tfoot).stripe {

在英語中，誰擁有的祖先類.portion-of-html一個元素，可以是一個tfoot元素或thead元素，也有類.stripe。

來源

2014-06-14 Marc M.

如果重複代碼，你可以刪除括號，它就像分配律數學：

.portion-of-html thead.stripe, .portion-of-html tfoot.stripe

來源

2014-06-14 20:25:13 Oriol

好的，這個工程，但我有點困惑，爲什麼這個工程。當從右到左進行評估時，你可以到''，並且再次對自己說'也有'.stripe'類並且是'thead'元素。因爲它必須是一個'thead'元素和一個'tfoot'元素。或者，''，'評價爲一個整體的左邊？ –

@MarcM。選擇符匹配帶有類「stripe」的'thead'元素，它是元素的子元素的後裔，或者帶有'stripe'類的'tfoot'元素，它們是元素的後裔， -html'。逗號在CSS中的行爲像'（.portion-of-html thead.stripe），（.portion-of-html tfoot.stripe）' – Oriol

在純CSS我想你只需要編寫各種情況下進行逗號分隔。

.portion-of-html thead.stripe, .portion-of-html tfoot.strip {

你可能想看看LESS。這是相當簡單的，你可以這樣寫選擇器..

.portion-of-html { 
    styles: values; 
    thead.stripe, tbody.stripe { 
     styles: values; 
    } 
}

很少編譯到純css。您可以使用js庫在客戶端上處理更少的文件，或者您可以先處理它們，然後將純CSS發送給客戶端，這是我的首選。

我發現較少允許我以與我的HTML相同的嵌套/ xml樣式格式構造樣式。它有助於規範我的工作流程。還有SASS，但我不熟悉這一點。

來源

2014-06-14 20:38:12 Phatjam98

複雜的CSS選擇器 - 使用「和」與類選擇器

回答

相關問題