理解困難以下CSS語法

Question

目前，我有一個css代碼片段如下：

ul.grid, ul.grid > li { 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 

可有人向我解釋什麼是

ul.grid, ul.grid > li ? 

意味着糾正我，如果我錯了，ul.grid說網格是一個類？我可以如何使用ID而不是類？

Answer 1

ul.grid表示具有類grid的ul元素。

ul.grid > li指li元件，其是具有grid類ul元件的直接子（而不是進一步的後代）。

逗號分隔兩個裝置，下列規則將換句話說被應用於匹配兩個選擇器元件，所以，它們將被施加到ul及其所有子li元件。

我可以一些如何使用ID而不是類？

是的。用#更換.並確保元件具有id：

ul#grid, ul#grid > li { ... }

這將適用於，例如：

<ul id="grid"> 
    <li></li> 
</ul> 

Answer 2

要使用ID而不是類，更換.與a #並使用ul ID：

ul#ulID, ul#ulID > li 

Answer 3

ul.grid表示任何具有一個網格類的ul標籤。
ul.grid> li表示任何li標籤，它是具有網格類的ul標籤的子標籤。