在css类中放置元素的位置有什么区别？

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

任何资源都可以非常清楚地解释以下内容之间的差异：

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

以及：

或：

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

等等

---

当我做实验时，我能看到变化，但我不明白我在做什么

解释语法

空白指定任意深度的子节点

p.example

=将

p

标记作为父元素，选择其类别为

example

的元素，该元素可以存在于该父元素下的任何级别下

p.example

=选择一个元素，该元素是一个

p

标记，并且具有一个类

example

.example p

=将类为

example

的元素作为父元素选择一个

p

标记的元素，该元素可以存在于该父元素下的任何级别下

.example.p

=选择一个既包含

example

又包含

p

的元素作为一个类（注意，即使

p

也被视为一个类，因为它与

操作符一起使用）

---

p h1.example

=从

p

标记开始导航到

h1

标记任何级别的深度，并选择具有class

example

的元素，这些元素可以存在于

h1

标记的任何级别的深处

p h1.example

=从

p

标记开始选择一个

h1

标记，该标记具有一个类

example

，可以存在于该

p

标记的任何深度

.example p h1

=从类为

example

的元素开始，导航到此元素中的

p

标记（任意级别深度），并选择该

p

标记下的所有

h1

标记（任意级别深度）

.example.p h1

=从包含类

example

和

p

的元素开始，然后选择该元素下的所有

h1

标记（任意深度）

---

，指定多个扇区

例如：如果我想将所有

p

标记、

div

标记、

span

标记作为背景红色，那么我可以在一个CSS选择器中选择所有标记，并给出一次特定规则，如下所示

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

p，h1.example

=选择

p

标记，然后选择一个类为

example

的元素，该元素被包装在

h1

标记的任意级别下

---

到现在为止，我确信您已经理解了其余三种语法

p，h1.example

，

。example p，h1

，

，
。example.p，h1
p。example
->->这意味着您将在段落（p）标记内以“example”命名的类作为目标

p.example
->生成与上面相同的结果

.example p
->这意味着您要针对在名为“example”的类中起作用的段落（p）标记

.example.p
->这意味着您的目标是在名为“example”的类中运行的“p”类

ph1.example
->以“p”标记内的“h1”标记内的“example”类为目标

ph1。示例
->生成与上面相同的结果

.example p h1
->以“example”类中的“p”标记内的“h1”标记为目标

.example.ph1
->以“example”类中的“p”类中的“h1”标记为目标

p，h1.example
->“h1”标记内的类“example”将具有与“p”标记相同的属性

p，h1。示例生成与上面相同的结果

.example p，h1
->“example”标记中的标记“p”将具有与“h1”标记相同的属性

.example.p，h1
->“example”标记中的类“p”将具有与“h1”标记相同的属性。
关于术语，您所指的是选择器

我将逐一解释：

p .example

选择具有类
example
的
p
元素的所有后代

p.example

.example p

.example.p

p, h1 .example

.example p h1

.example.p h1

用class
example
选择所有
p
元素

p.example

.example p

.example.p

p, h1 .example

.example p h1

.example.p h1

选择具有类
示例
的元素的所有
p
子体

p.example

.example p

.example.p

p, h1 .example

.example p h1

.example.p h1

选择具有class
example
和class
p
的所有元素

p h1 .example

.example p, h1

使用类
示例
选择
p
中
h1
的所有子体

p.example

.example p

.example.p

p, h1 .example

.example p h1

.example.p h1

使用类
example
选择
h1
的所有
p
元素和所有后代

p.example

.example p

.example.p

p, h1 .example

.example p h1

.example.p h1

选择从
p
元素派生的所有
h1
元素，该元素是从类为
示例的元素派生的

p.example

.example p

.example.p

p, h1 .example

.example p h1

.example.p h1

选择所有
h1
元素，这些元素是具有class
示例和class
p
的元素的后代

p h1 .example

.example p, h1

选择所有
p
元素，这些元素是具有类
example
的元素的后代，以及所有
h1
元素

.example.p, h1

选择同时具有class
example
和class
p
以及所有
h1
元素的所有元素

.example.p, h1


如何阅读CSS
CSS有时很难解释。我发现倒读起来最容易

举第一个例子：

p .example

从最右边的项目开始。示例
。这意味着只会选择具有class
example
的元素。因为在此之前有一个
p
（中间有一个空格），它将选择范围“缩小”到只包含
p
元素的后代

.example.p, h1

在第二个例子中：

p.example

同样，最右边的项目是
。示例
。这意味着只会选择具有class
example
的元素。因为在此之前有一个
p
（这次没有空格），它将选择范围缩小到只有
p
该类元素

下面是一个示例HTML片段，其中描述了哪个示例选择哪个元素：

<p class="example">This element will be selected by the second example</p>
<p> <!-- this p element will not be selected by either example -->
    <span class="example">This element will be selected by the first example</span>
</p>

这将选择所有
p
标记和所有