選擇除最後一個列表元素外的所有元素

Question

我有一個列表tags我想要水平顯示。現在爲每個<li>，但最後一個，我想在物品後添加一個,。現在

，我能做到這一點，當然：

ul.tags { 
    list-style: none; 
} 

ul.tags > li { 
    display: inline; 
} 

ul.tags > li:after { 
    content: ", "; 
} 

ul.tags > li:last-of-type:after { 
    content: ""; 
} 

現在我想過合併最後兩個規則，如：

ul.tags > li:not(ul.tags > li:last-of-type):after { 
    content: ", "; 
} 

但是，這是行不通的。我如何選擇全部但最後的<li>？

Answer 1

所有你需要的僅僅是:not內的:last-of-type（如下面的代碼片段所示）。作爲參數的:not accepts only simple selectors。

下面是什麼specifications說一下簡單的選擇：

一個簡單的選擇要麼是一個類型選擇，通用選擇，屬性選擇器，類選擇，ID選擇，或者僞類。

ul.tags > li:not(:last-of-type):after { 
 
    content: ", "; 
 
} 
 
ul.tags { 
 
    list-style: none; 
 
} 
 
ul.tags > li { 
 
    display: inline; 
 
}

<ul class='tags'> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
</ul>