难以理解以下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代替类吗？

是。将.替换为#，并确保元素包含id：

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

这适用于，例如：

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

Answer 2

要使用ID而不是类，请将.替换为#并使用ul ID：

ul#ulID, ul#ulID > li

Answer 3

ul.grid表示任何也有一类网格的ul标签 ul.grid＆gt; li表示任何li标签，它是ul标签的子级，具有网格类。