难以理解以下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表示ul具有类的元素grid.

ul.grid > li表示具有类的li元素的直接子元素(而不是其他后代)的ul元素grid.

将两者分开的逗号意味着以下规则将应用于与两个选择器匹配的元素,换句话说,它们将应用于其ul所有子li元素.

我可以使用id而不是类吗？

是..用a 替换#并确保元素具有id:

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

这适用于,例如:

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