修改

Question

我有一个与列表和使用nth-child有关的问题。

我有两个由选择器定位的列表，我正在尝试访问各个元素。

在我的小提琴例子中，我预计第五项是黄色而不是青色。

当选择器定位多个列表时，它们是否未组合成一个列表？

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

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>

    </ul>

    <ul>
        <li>a</li>
        <li>b</li>
    </ul>

https://jsfiddle.net/1q66hwgg/

谢谢！ S上。

Answer 1

不，他们没有合并到一个.. ul li:nth-child(5)选择特定li的第5个ul子项，而不是将所有ul合并，然后选择第5个孩子。

然而，您可以合并ul，然后将所需的样式应用于合并的li USING JavaScript的第5 ul行。以下是使用纯JS - https://jsfiddle.net/1q66hwgg/6/

进行此操作的小提琴

代码是 -

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;
    }
}

Answer 2

你的小提琴就像你想要的那样工作。这个问题：

当选择器定位多个列表时，它们是否未组合成一个列表？

答案是否定的。两个列表是独立的，如果您定位ul li，则选择所有li但未合并的所有ul。

为了合并多个ul，您需要删除除最后一个ul之外的每个ul的结尾，以及除第一个之外的每个ul的开头。

修改

我用一段javascript帮助你组合所有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); }

https://jsfiddle.net/1q66hwgg/2/

代码：

Handlebars.registerHelper( 'concat', function(path) {
    return "/etc/path" + path;
});

Answer 3

我已经通过CSS select first element with a certain class回答和nth-of-child并找到了这个...请检查

Demo

正如Marcos和Paulie所说，两个列表将是独立的，对于两个或所有（如果你使用更多）你必须应用不同的CSS规则，但如果你想通过一个父母那么你可以跟我的小提琴（帮助Paulie_D和Lea）。您可以在外部div / ul

的帮助下轻松与他们合作

Answer 4

快速jQuery解决方案虽然非常广泛作为选择器，但建议进一步限制选择器。

$('li').eq(4).css('backgroundColor', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>

</ul>

<ul>
  <li>a</li>
  <li>b</li>
</ul>

Answer 5

正如其他一些答案所说的那样;不，当使用nth-child时，列表不会合并为一个。

您希望第二个button_green中的第一个li为黄色，仅使用CSS，您可以使用此功能：

ul

列表和n-child

5 个答案:

修改