css - 第 N 个匹配元素 CSS

Question

有没有办法在纯 CSS 中选择第 n 个匹配元素？类似于 $(selector)[Nth]

<div>
  <ul>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

css 规则 div ul li 将选择所有 li 元素，现在我只想操作第一个。

div ul li:nth-of-type(1) 会选择三个元素 div li:nth-of-type(1) 也不起作用，因为它表示“父级的第一个 li”

这只是一个例子，树可能更深并且有不规则的结构。在我匹配的元素中，我想选择第 n 个。有没有办法做到这一点？是选择一个特定的指数，还是一个范围？

Answer 1

给定这个结构

<div>
  <ul>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

你需要

div ul:first-of-type li:first-child

或

div ul:first-of-type li:nth-child(1)

Is there a way to select the nth of the matched elements in pure CSS?

不。不存在这样的 CSS 选择器

要在这样的未知结构中选择第 n 个 li，您需要 javascript

var n = 4
// where n = the 4th one required 

$( "li" ).eq( n-1 ).css( "color", "red" );

var n = 4
  // where n = the 4th one required 

$("li").eq(n - 1).css("color", "red");

li {
  font-size: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Jquery Demo