css - 将元素放在 css 类中有什么区别？

Question

我可以让 CSS 工作，但有些事情我不是很明白。

任何资源都可以非常清楚地解释它们之间的区别:

p .example
p.example
.example p
.example.p

和:

p h1 .example
p h1 .example
.example p h1
.example.p h1

或者:

p, h1 .example
p, h1 .example
.example p, h1
.example.p, h1

等....

我做实验的时候能看到变化，但是我不明白我在做什么!

Answer 1

解释语法

white space specifies child nodes any level deep

p .example = 以p标签为父标签选择一个类为example的元素，它可以存在于该父标签下的任何层级下元素

p.example = 选择一个元素，它是一个 p 标签并且有一个类 example

.example p = 以 example 类的元素为父元素选择一个 p 标签的元素，它可以存在于任何级别下这个父元素

.example.p = 选择一个同时包含 example 和 p 的元素作为类(注意即使是 p 被认为是一个类，因为它与 . 运算符一起使用)

---

p h1 .example = 从 p 标签开始导航到 h1 标签任意深度并选择类 example< 的元素 可以存在于h1 标签

深处的任何层级

p h1.example = 从 p 标签开始选择一个 h1 标签，它有一个 example 类可以存在于此 p 标签

的任何深处

.example p h1 = 从类为 example 的元素开始，然后导航到该元素中的 p 标签(任意深度)并选择此 p 标签下的所有 h1 标签(任何深度)

.example.p h1 = 从同时具有 example 和 p 类的元素开始，然后选择所有 h1 此元素下的标签(任何深度)

---

, specifies multiple sectors .

例如:如果我想将所有的p标签、div标签、span标签设为背景红色，那么我可以选择所有它们在一个 CSS 选择器中并给出一个特定的规则一次，如下所示

p, div, span{
 background-color: red;
}

p, h1 .example = 选择 p 标签，并选择一个包含在 h1< 下的类 example 的元素 标记任何深度。

到现在我相信你会理解剩下的三个语法 p, h1 .example , .example p, h1 , .example.p, h1