第n个孩子的CSS目标姓氏和3个子

Question

我有这样

<ul> 
    <li>1.1</li> 
    <li>1.2</li> 
    <li>1.3</li> 
    <ul> 
     <li>2.1</li> 
     <li>2.2</li> 
     <li>2.3</li> 
    </ul> 
    <ul> 
     <li>2.4</li> 
     <li>2.5</li> 
     <li>2.6</li> 
    </ul> 
    <li>1.4</li> 
    <li>1.5</li> 
    <ul> 
     <li>2.7</li> 
     <li>2.8</li> 
     <li>2.9</li> 
    </ul> 
    <li>1.6</li> 
    <li>1.7</li> 
    <li>1.8</li> 
</ul> 

一个html我怎么能只针对最后一个和前3的孩子呢？在我的HTML我只想要1.1，1.2，1.3，1.6，1.7和1.8将是目标。

这是我tried但它也针对李UL的孩子里面UL

Answer 1

首先，你需要一种方法来识别ul你有兴趣，你可以在类或ID添加到最ul以便您的选择器不会以其他ul为目标。 （如果编辑HTML不是选项，可以使用选择器中的父元素，并且仅选择直接下标ul's。）

接下来，使用正确的选择器来获取第一个和最后3个子元素。

要选择第3个孩子：

ul.top > li:nth-child(-n+3) 

要选择最后3个孩子：

ul.top > li:nth-last-child(-n+3) 

看到它here.