css - 难以理解以下css语法

Question

目前我有一个CSS片段如下:

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

谁能给我解释一下

ul.grid, ul.grid > li ?

如果我错了请纠正我，ul.grid 说网格是一个类？我可以知道如何使用 id 而不是 class 吗？

Answer 1

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

ul.grid > li 表示 li 元素，它是 ul 元素的直接子元素(而不是进一步的后代) 网格类。

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

Can i some how use id instead of class?

是的。将 . 替换为 # 并确保元素具有 id:

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

这适用于，例如:

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