如何僅將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來做邊框。