在CSS選擇器中使用OR

我有一個出現在許多頁面上的元素，我想根據它所在的高級div的類別來區別它的樣式。例如，如果我想更改我的標誌顏色取決於它所在頁面的「類型」。然後讓我們說，這些類型可以分組（所以typeA，typeB和typeC應該使用一種顏色，而typeD和typeE應該使用另一種顏色）。另外，由於高級div的這些類型也用於其他事情，所以它們不能合併。在CSS選擇器中使用OR

.typeA #logo, 
.typeB #logo, 
.typeC#logo{ 
color: #ffffff; 
} 

.typeD #logo, 
.typeE #logo,{ 
color: #000000; 
}

有沒有一種方法可以與某些選擇器鏈接在一起，這樣我就不必讓這段代碼看起來很骯髒。這個例子很小，但真實世界的版本涉及更多的類型。有沒有辦法做這樣的事情：

.typeA || .typeB || .typeC#logo{ 
color: #ffffff; 
}

來源

2011-03-23 deadroxy

這將是對CSS選擇器的史詩般的改變。我希望你能做'（.typeA | .typeB | .typeC）#logo {color：#ffffff; }' – redbmk 2012-04-13 18:12:42

正如其他人所說，CSS不支持這種分組。

如果您可以控制您的標記，爲什麼不只是將一個通用類添加到每個類型類組中，然後選擇該通用類呢？

實施例：

<div class="typeA type1"> 
    <span id="logo">Site Title</span> 
</div> 

<div class="typeD type2"> 
    <span id="logo">Site Title</span> 
</div>

.type1 #logo { color: #ffffff; } 
.type2 #logo { color: #000000; }

來源

2011-03-23 18:11:43 BoltClock

只要不需要IE 6支持，這就是要走的路。 – 2011-03-23 18:17:45

@Jonathan Fingland：只要你不在一個選擇器中鏈接多個類，IE6就支持多個類;只針對其中的一個。 – BoltClock 2011-03-23 18:18:11

已經忘記了細節，謝謝。 – 2011-03-23 18:22:02

簡而言之：無。

有喜歡LESS系統，使這個可能的，但呈現的CSS仍然會看起來像你的第一個例子

來源

2011-03-23 18:13:07

對不起，不只是限定在CSS，沒有。但有些項目需要外部編譯器來執行您想要的操作，如http://sass-lang.com/。

來源

2011-03-23 18:13:48

在我知道的CSS中沒有「或」。只需使用不同的選擇器，它是「containerA」或「containerB」類型的父類型A，B和C

來源

2011-03-23 18:14:50 clark

這對純CSS不可行。可以用SASS等元語言完成。請參閱http://sass-lang.com/瞭解更多信息。

來源

2011-03-23 18:16:02 Matijs

在CSS選擇器中使用OR

回答

相關問題