理解困难以下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标签的子标签。