将元素放在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

ECT ....

我在实验时可以看到变化,但我不明白我在做什么!

Answer 1

解释语法

空格指定任何级别的子节点

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到此元素中的h1标记(任何级别深)并选择此p标记下的所有标记(任何级别深)

.example.p h1=从包含两个类的元素开始example,p并选择h1此元素下的所有标记(任何级别深)

,指定多个扇区.

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

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

p, h1 .example= select ptag,并选择一个example包含在h1任何级别深度的标记下的类的元素.

到现在为止p, h1 .example,我相信你会理解其余的三种语法.example p, h1,.example.p, h1