如何将nth-child或nth-of-type仅应用于可见元素？

Question

demo

这是标记：

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li style="display: none;">four</li>
    <li style="display: none;">five</li>
    <li style="display: none;">six</li>
</ul>
<div>next example</div>
<ul>
    <li style="display: none;">one</li>
    <li style="display: none;">two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li style="display: none;">six</li>
</ul>

并应用此css：

li:nth-child(3){
    border-bottom: 1px solid black;
}

结果如下：

one
two
three
-----------------

three
-----------------
four
five

我希望结果如下：

one
two
three
-------------

three
four
five
----------

那么，我怎样才能将nth-child或其他东西仅应用于可见元素？

Answer 1

我试过了;

li:not([style]):nth-child(3){
    border-bottom: 1px solid black;
}

虽然它似乎不起作用，但是很遗憾。仅使用CSS，您无法使用当前标记执行此操作。

如何设置style属性？您可以设置一个类及其样式，并使用它来选择它们而不是li或使用javascript来执行边框。