如何在CSS中针对多个父母的第n个孩子？

CSS：跨多个父级定位第 n 个子元素

问题

考虑以下 HTML 结构：

<code class="html"><div class="foo">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
  <ul>
    <li>three</li>
  </ul>
  <ul>
    <li>four</li>
  </ul>
</div></code>

目标是将列表项“一”和“三”设置为红色。但是，使用 CSS 选择器：

<code class="css">.foo li:nth-child(1),
.foo li:nth-child(3)</code>

为每个 ul 的第一个子元素设置样式。

解决方案

仅 CSS 方法：

不幸的是，仅使用 CSS 无法在多个父级中选择第 n 个子级。 :nth-child() 和同级组合器都不允许进行此类选择。

Javascript 或 DOM 操作：

要实现此类目标，您可以诉诸 Javascript 或 DOM操纵技术。例如，使用 jQuery：

<code class="javascript">$('.foo li:eq(0), .foo li:eq(2)').css('color', 'red');</code>

类或 ID 标记：

或者，您可以使用类或 ID 显式标记目标列表项。例如：

<code class="html"><div class="foo">
  <ul>
    <li class="target">one</li>
    <li>two</li>
  </ul>
  <ul>
    <li class="target">three</li>
  </ul>
  <ul>
    <li>four</li>
  </ul>
</div></code>

然后，使用标记的类或 ID 进行样式设置：

<code class="css">.foo .target {
  color: red;
}</code>

以上是如何在CSS中针对多个父母的第n个孩子？的详细内容。更多信息请关注PHP中文网其他相关文章！