CSS 可以針對多個父元素的第 n 個子元素嗎？

CSS 中跨多個父級的第n 個子元素：一個未解之謎

在CSS 領域，選擇特定子元素的能力長期以來，父母之內一直是網頁設計師的主要內容。然而，當涉及到跨多個父元素定位第 n 個子元素時，路徑變得非常複雜。

考慮以下場景：您有一個包含多個 ul 元素的 div.foo 容器，每個元素包含一組李項。您希望將樣式專門套用到 div.foo 中所有 ul 的第一個和第三個 li 元素。

乍一看，以下CSS 可能看起來是一個簡單的解決方案：

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color:red;
}

然而，由於CSS :nth-child() 選擇器的固有限制，這種方法存在缺陷。它只能定位同一直接父級中的子元素。因此，上面的CSS 只會設定每個ul 的第一個子級的樣式，從而導致以下不良結果： http://jsfiddle.net/hTfVu/

要實現所需的結果，僅靠CSS 選擇器是不夠的。 jQuery 等 JavaScript 函式庫提供了一個方便的解決方案：

$('.foo li:eq(0), .foo li:eq(2)')

此程式碼選擇 div.foo 中包含的每個 ul 中的第一個和第三個 li 元素。

或者，您可以明確標記第一個和第三個 li 元素使用類別或 ID，然後透過 CSS 相應地定位它們。然而，這種方法需要修改 HTML 結構，這可能並不總是可行。

總而言之，跨多個父元素定位第 n 個子元素仍然是 CSS 原生功能中的一個未解之謎。然而，透過採用 JavaScript 程式庫或使用顯式 HTML 標記，可以克服這些限制，從而在複雜的文檔結構中實現精確而細緻的樣式。

以上是CSS 可以針對多個父元素的第 n 個子元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！