如何仅将n-child或n-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来做边框。