jquery - 如何仅将 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
----------

那么，我怎样才能将第 n 个子元素或其他东西仅应用于可见元素？

Answer 1

我试过了；

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

虽然好像不行，可惜。您不能仅使用 CSS 对当前标记执行此操作。

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