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中文网其他相关文章！