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)也不起作用，因为它意味着＆＃34;父母的第一个li＆＃34;

这只是一个例子，树可能更深，结构不规则。在我匹配的元素中，我想选择第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)

有没有办法在纯CSS中选择匹配元素的第n个？

不。没有这样的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

Answer 2

您可以使用:first-child伪类

li:first-child {

}

第N个匹配元素CSS

2 个答案: