Question

我有一个嵌套列表，看起来像这样：

var thingsToDo = [
  {task: 'wash the dog', priority: 10},
  {task: 'do taxes', priority: 1},
  {task: 'clean the garage', priority: 3}
];

var tl = new ToyList(['truck', 'plane', 'doll']);
for (var i=0; i<3; i++) {
  console.log(tl.toys[i]); // access the *pseudo* toys attribute
}

var todos = new Todos(thingsToDo);
var r = todos.byPriority; // access the *pseudo*  byPriority attribute (border effect: sorting internal data)

for (var i=0; i<3; i++) {
  console.log(todos.data[i].priority);
}

如果我想对每三分之一<ul> <li>Item 1</li> <li>Item 2 <ul> <li>Item 3</li> <li>Item 4</li> </ul></li> <li>Item 5 <ul> <li>Item 6 <ul> <li>Item 7</li> <li>Item 8</li> </ul></li> <li>Item 9</li> </ul></li> <li>Item 10</li> </ul>应用一个下边距，意思是第3项，第6项和第9项，我该怎么做？

我查看了使用<li>和li:nth-child(3)并且都没有效果。那些选择器不计算我需要的方式。

Answer 1

正如其他人所提到的那样，由于您的<li>代码不会与父母分享，因此儿童关系无法实现您之后的目标。

看起来你最好的选择是以某种方式修改HTML以直接附加某些类或样式属性。

这可能只是简单地更改HTML本身，或者使用一点JS来遍历所有这些<li>标记，并动态添加类或更改样式属性。

Answer 2

不幸的是，使用嵌套列表无法实现这一点。如果您只有一个列表，则可以使用CSS实现此效果：

li:nth-child(3n+0){
    margin-bottom: 10px;
}

问题是CSS不会继续计算嵌套列表中的列表项，并将每个列表计为从1开始。我发现实现您想要的最简单方法是创建一个新类和然后将该类应用于您想要加下划线的每个元素：

.margin{
    margin-bottom: 10px;
}

然后将class = "margin"或其他任何名称应用于您想要加下划线的每个元素，新代码为：

<ul>
    <li>Item 1</li>
    <li>Item 2
    <ul>
        <li class = "margin">Item 3</li>
        <li>Item 4</li>
    </ul></li>
    <li>Item 5
    <ul>
        <li class = "margin">Item 6
        <ul>
            <li>Item 7</li>
            <li>Item 8</li>
        </ul></li>
        <li class = "margin">Item 9</li>
    </ul></li>
    <li>Item 10</li>
</ul>

我希望这很有用

如何向第n个列表项添加样式，包括嵌套列表中的列表项

2 个答案: