瞭解子代選擇器的更復雜的例子

Question

我有點理解後代選擇器，但更復雜的例子給我帶來麻煩。例如：

#content .alternative p 

如果該規則適用於那些元素E，後代，其中E是p元素：元素#conten噸

• 後代和
• 也.alternative
類的成員

或應該規則適用於元素是：

元件 #content

的個

• 後代，並且也.alternative類的成員？

下面的規則怎麼樣？

#content .alternative .alternative1 p 

Answer 1

選擇最右邊的組件的詳細信息是實際採元素的一部分。空格是後代選擇器。如果沒有空格，則選擇器全部應用於一個元素。

#content .alternative p 

p元素包含在包含在id內容元素中的替代元素中。載於載於包含在ID的內容的元素類替代的元件類alternative1的元件

#content .alternative .alternative1 p 

p元素。

#content p.alternative.alternative1 

p元素的類替代品1和包含在id內容元素中的替代品。

Answer 2

關於第一個問題：適用於p元素是：元素＃內容的 後代，並且還與子孫類元素的 .alternative

第二個是相同的，只是具有額外的深度。

檢查this link對選擇

Answer 3

指定符的每個由空格分隔的部分引用文檔中的單獨節點。所以它是第一個。

Answer 4

第一個是正確的描述。你的第二個解釋將在CSS中可以寫爲：

#content p.alternative 

由於.alternative連接到該版本的p，這是一個限定詞，而不是指定的後代。如果你不是把它寫成

#content p .alternative 

那豈不是p元素是#content元素的後代的後代.alternative類的元素。