Question

我正在使用与此类似的HTML（来自第三方网站 - 这是代码的提供方式，我无法控制它）：

<ul class"list">
    <li>first list item</li>
    <li>second list item</li>
    <div>
        <li>third list item</li>
        <li>fourth list item</li>
    </div>
    <li>fifth list item</li>
    <li>sixth list item</li>
</ul>

如何使用CSS选择第五个列表项？使用Javascript，如果我在DOM中使用document.querySelectorAll('ul li')，我将获得一个包含所有6个<li>元素的可迭代NodeList。

然后let list_items = document.querySelectorAll('ul li')允许我使用list_items[4]访问第五个列表项。但是，如果我尝试document.querySelectorAll('ul li:nth-child(5)')它不起作用，因为很明显，CSS只会看到4 <li>个元素（<ul>的直接子元素）。

有没有办法用CSS做到这一点，还是我需要重新修改我的方法？

*编辑*

我需要能够根据用户输入任意选择任何li元素。 li部分后div元素的存在和数量会有所不同。我可以使用li之类的内容div之前的ul > li:nth-of-type(${index_from_user_input})或使用div之类的ul > div > li:nth-of-type(${index_from_user_input})正确选择任何li元素。我最初计算li的数量并使用它作为索引的基础......所以如果用户输入表明我需要选择第三个ul li:nth-of-type(3)，例如，我希望能够简单地使用像index_from _user_input这样的东西。

但如果div指向li之后的元素，则它无法正常工作，因为CSS无法识别div内的ul li:nth-child() {1}}，所以我的选择器中的索引号已关闭。我希望找到一个仅使用ul li:nth-of-type()或li的更干净的解决方案，这样我就不必检查div内和之后myLists = [("ABCC8", ABCC8), ("APP", APP), ("BECN1", BECN1), ("ARNTL", ARNTL)]的数量ref 。我怀疑它是不可能的，因为标记不好，但我并不是100％肯定，所以我想我会问这里，以防有人可能有一个聪明的方法它。否则，我可以重新编写代码并以不同的方式处理整个事情。

Answer 1

这就是代码的服务方式，我无法控制它

哦，你真的这么做。您可以使用javascript从列表中删除错误的div。

工作示例：

＆＃13;

 dataSource.getArticles(source)
    .mergeWith(remoteSource.getArticles(source))
    .flatMapIterable(v -> v)
    .distinct()
    .toList()

＆＃13;

/* IDENTIFY ELEMENTS */
var list = document.getElementsByTagName('ul')[0];
var erroneousDiv = list.getElementsByTagName('div')[0];
var select = document.getElementsByTagName('select')[0];
var button = document.getElementsByTagName('button')[0];

/* IDENTIFY LIST ITEMS */
var allListItems = document.querySelectorAll('ul li');
var listItemsToMove = erroneousDiv.getElementsByTagName('li');
var numberOfListItemsToMove = listItemsToMove.length;

/* REARRANGE LIST ITEMS AND REMOVE ERRONEOUS DIV */
for (var i = 0; i < numberOfListItemsToMove; i++) {
    list.insertBefore(listItemsToMove[0], erroneousDiv);
}

list.removeChild(erroneousDiv);


/* SELECTOR FUNCTION */
function selectListItem() {
    for (var i = 0; i < allListItems.length; i++) {
        allListItems[i].removeAttribute('style');
    }

    var selected = select.value;
    var listItem = document.querySelector('ul li:nth-of-type(' + selected + ')');
    listItem.style.color = 'blue';
    listItem.style.fontWeight = 'bold';
}

button.addEventListener('click', selectListItem, false);

＆＃13;

ul, form {
display: inline-block;
margin-right: 80px;
vertical-align: middle;
}

＆＃13;

nth-child（），包括非法儿童（格式错误的HTML）

1 个答案: