如何使用 CSS 僅選擇 DIV 的直接子級？

直接子級的CSS 選擇器

您希望將CSS 應用於類別為「section」的DIV 的第一個直接子級。但是，您遇到了意外行為，其中樣式影響的不僅僅是所需的元素。

您使用的選擇器是「DIV.section DIV:first-child」。此選擇器與類別「section」的 DIV 內的任何 DIV 相匹配，並且是其父級的第一個子級。但是，在您的 HTML 中，「子內容 1」DIV 位於另一個 DIV 內，該 DIV 是「部分」DIV 的第一個子級，因此樣式的應用意外。

要解決此問題，您可以使用更精確的選擇器：

對於主DIV 的兩個子級：

div.section > div

這個選擇器使用“>”符號，它選擇指定父元素的直接子元素。在這種情況下，它只會匹配「section」DIV 的直接子層級的兩個 DIV。

僅適用於標題：

div.section > div:first-child

此選擇器將前一個與“:first-child”偽類結合起來，確保僅選擇“section” DIV 的第一個直接子級。這將專門針對“標題”DIV。

請注意，「>」除 IE6 之外的所有主流瀏覽器都支援該符號。如果 IE6 支援至關重要，您可能需要使用替代方法，例如向子 DIV 新增類別並直接設定它們的樣式。

以上是如何使用 CSS 僅選擇 DIV 的直接子級？的詳細內容。更多資訊請關注PHP中文網其他相關文章！