逗號在CSS選擇器中的含義是什麼？

Question

是什麼意思時，我有

#A .B, 
#A .C { some styles } 

這是否意味着B類沒有風格定義？

Answer 1

它意味着同樣的定義適用於既 - 匹配B類和C類。

Answer 2

這意味着二者#A .B和#A .C共享相同的聲明塊的DOM元素。

逗號表示將該塊中的聲明應用於這兩個選擇器，而逗號後面的換行並不意味着任何特殊的內容;它只是用於提高樣式表可讀性的純粹空白。

Answer 3

這就是所謂的selector grouping。它會是一個捷徑：

A .B {some definitions} 
A .C {some definitions} 

Answer 4

#A .B, #A .C {some definitions} 

讓我們仔細分析每個單獨的選擇：

首先，逗號是用來分隔多個選擇;而不是爲每個選擇器編寫相同的樣式規則（例如，對於#A .B和再次對於#A .C），您可以將選擇器合併在一起。這意味着造型定義將在#A .B和#A .C規則上執行。

如果你想知道的好，我們還解剖＃A .B選擇：

個人選擇之間的間距（在這種情況下，與之間＃A .B）代表一個後代關係，其中#A是祖先和.B是後代。 ＃符號用於表示元素ID，其中。符號用於重傳元素的類。這意味着上面的選擇器定義用於查找所有具有類別B的元素，它是具有ID A的元素的後代（不一定是直接）。

在更大的圖片，作爲逗號用於合併兩個選擇器設置在一起，充分選擇的定義是：包含一類乙或Ç即也與元件的後代所有元素ID A。

注意：如果ID 甲的元件還包含類乙或Ç，造型定義將不會在其上執行，因爲它必須包括（兩個元件之間的後代關係這一點，您需要選擇器定義#AB或#AC）。

希望這會有所幫助。