為什麼 `DIV.section DIV:first-child` 不只是設定第一個直接子級的樣式？

直接子選擇器特異性

將 CSS 應用於 HTML 元素時，了解選擇器的特異性至關重要。在您的場景中，選擇器 DIV.section DIV:first-child 似乎同時設計了「子內容 1」和「標題」div 的樣式。

但是，選擇器旨在僅匹配第一個直接子級具有「section」類別的 div。讓我們來分析為什麼原始選擇器沒有如預期運作。

理解直接後代與直接子代

:first-child 偽類選擇第一子代一個元素的。但是，在您的情況下，您將其應用於 DIV.section DIV，這意味著「選擇屬於 'section' 類別的 div 的後代的所有 div」。這包括直接子級和嵌套子級。

使用直接後代選擇器

要僅定位具有「section」類的div 的第一個直接子級，您可以應使用直接後代選擇器( >)。此運算符會匹配作為特定父級的直接子級的元素。修改後的選擇器將是：

div.section > div:first-child

此選擇器將僅正確設定「標題」div 的樣式，因為它是具有「section」類別的 div 的第一個直接子級。

舊版瀏覽器問題

請注意，舊版瀏覽器（例如​​ Internet Explorer 6）不支援直接後代選擇器。如果您需要支援此類瀏覽器，您可能需要使用替代方法，例如向子 div 新增類別。

以上是為什麼 `DIV.section DIV:first-child` 不只是設定第一個直接子級的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！