Css 列表和第n个子项

我有一个关于列表和第n个child的使用的问题

我有两个以选择器为目标的列表，正在尝试访问单个元素

在我的小提琴示例中，我希望第五个项目是黄色而不是青色

当选择器以多个列表为目标时，它们不是合并到一个列表中吗

    ul li:nth-child(5){
            background-color: yellow;
    }   

---

一,
二,
三,
四,


a
b

谢谢！

---

不，它们不是一个整体。。

ul-li:n子级（5）

选择特定

ul

的第5个子级

li

而不是组合所有

ul

，然后选择第5个子级

但是，您可以组合

ul

，然后使用JavaScript将所需样式应用于组合

ul

的第五个

li

。下面是我如何使用纯JS实现这一点的技巧-

代码是-

var ul = document.getElementsByTagName('ul');
var li = [];
for(var i=0; i< ul.length; i++) {
    var item = ul[i].querySelectorAll('li');
    for(var j=0; j< item.length; j++) {
        li.push(item[j]);
    }
    if(li[4]) {
        li[4].style.backgroundColor = "yellow";
        break;
    }
}

var ul=document.getElementsByTagName（'ul'）；
var li=[]；
对于（变量i=0；i

您的小提琴正按您所希望的方式工作。这个问题：

当选择器以多个列表为目标时，它们不是合并到一个列表中吗

    ul li:nth-child(5){
            background-color: yellow;
    }   

答案是否定的。两个列表是独立的，如果您以

ul-li

为目标，则您选择了所有

ul

中的所有

li

，但没有组合

要组合多个

ul

，您需要手动删除每个

ul

的末尾（最后一个除外），以及每个

ul

的开头（第一个除外）

编辑 我摆弄了一段javascript，它可以帮助您组合所有

ul

守则：

var arrLi = [];
$('ul').each(function() {
    $(this).find('li').each(function() {
        arrLi.push($(this).html());
    });
    $(this).remove();
});
var ul = $('<ul></ul>').attr({id:"ulid"}).appendTo("#wrap");
for(var i in arrLi) {
    var li =$('<li>'+arrLi[i]+'</li>');
    li.appendTo(ul);
}

var arrLi=[]；
$（'ul'）。每个（函数（）{
$（this）.find（'li'）.each（function（）{
arrLi.push（$（this.html（））；
});
$（this.remove（）；
});
var ul=$（'
）.attr（{id:“ulid”}）.appendTo（“#wrap”）；
用于（arrLi中的var i）{
var li=$（'
'+arrLi[i]+'
'）；
li.附录（ul）；
}

我已经检查了孩子的答案和第n个答案，发现了这个..请检查

---

正如Marcos和Paulie所说，两个列表将是独立的，对于这两个或所有列表（如果您使用更多），您必须应用不同的CSS规则，但如果您希望通过一个家长，那么您可以使用我的小提琴（帮助Paulie_D和Lea）。您可以借助outer

div

/

ul

快速jQuery解决方案轻松地使用它们，尽管它作为选择器非常广泛，建议进一步限制选择器

$（'li'）.eq（4）.css（'backgroundColor'，'red'）


一,
二,
三,
四,


a
b
正如其他一些答案所说；不，使用第n个子项时，列表不会合并为一个

您是否希望第二个
ul
中的第一个
li
为黄色，仅使用CSS，您可以使用此选项：

ul:nth-child(2) li:nth-child(1){
    background-color: yellow;
}

尝试ul li:n类型（4）//当选择器指向多个列表时，它们不是组合到一个列表中吗？-不没有。这个链接的第二个答案是正确的，我想-有人能帮我吗..我怎么能在我的答案中给出的链接中更改这个url..我受够了这个So系统..请编辑这个问题并将其链接..thanxwell我必须添加空白div来添加演示..有没有不添加任何代码的链接JSFIDLE的选项片段？嗯，我不想谈论meta.stackoverflow，因为它是一个糟糕的exp。那里的人好像准备给负面评分。meta对我来说就像鬼一样。噩梦…：（英译汉）谢谢你的帮助