CSS 类 .foo.bar （不带空格）和 .foo .bar （带空格）有什么区别

Question

请您解释一下这两个 CSS 类语法之间的区别：

.element .symbol {}

和

.element.large .symbol {}

我不明白两者之间的区别。第一行表示应用相同样式的两个不同类。但是关于第二个，附加到“.element”的“.large”是什么意思？

Answer 1

.element .symbol

表示

.symbol

在

.element

里面

.element.symbol

表示

.element

也具有

symbol

类。

那么，

.element.large .symbol

表示

.symbol

位于

.element

内，也具有

large

类。

Answer 2

我认为你有点误解了第一个的意思。

.element .symbol {}

意味着这些 CSS 设置将应用于任何具有

.symbol

类的 HTML 元素，该元素位于具有

.element

类的元素内。

<div class="element">
    <div class="symbol" />
</div>

在此示例中，您的第一个 CSS 条目将影响中间的

<div>

标签。

你的第二个例子意味着第一类需要两个类受到影响。除此之外，它与第一个相同。

<div class="element large">
    <div class="symbol" />
</div>

因此，如果 HTML 看起来像这样，CSS 值也将应用于内部

<div>

标签。

如果您想分别设置适用于多个类的 CSS 标签，则需要使用逗号将它们分开。所以它看起来像这样：

.element, .symbol {}

编辑： 根据请求，链接到 CSS 选择器的文档。

Answer 3

使用

.element.large

指的是具有 both 类的元素：

<div class="element large"></div>

而不是元素的后代：

.element .large

意思是：

<div class="element">
    <div class="large"></div>
</div>

仅

<div class="large"></div>

正在“接收”样式。

基本上，被空格分隔意味着两个元素具有

descendant

关系。

Answer 4

当一个元素位于另一个元素内部时，您可以使用

.element .symbol

。例如：

<div class="element">
    <i class="symbol"></i>
</div>

如果您想区分某些 div，您可以添加一个额外的类来仅针对那些不同的类，并使用

.element.large .symbol

进行定位。因此，例如：

<div class="element large">
    <i class="symbol"></i>
</div>

Answer 5

在第二个示例中，选择器的第一部分只是一个具有两个类的元素，如

<span class="element large">

或

<span class="large element">

中。

一般来说，选择器的每一部分都适用于一个 HTML 元素。

table[border].clname

表示具有 border 属性和 clname 类的表格，而

table [border] .clname

表示表格中具有 border 属性的元素中具有类 clname 的元素。

（编辑：好吧，我说“一个 HTML 元素”，但是当然你可以有多个适用于此的表。你明白。）

Answer 6

没有空格，您只是对选择器更加具体。因为类可以在 html dom 中出现多次。但一个元素中有两个或多个类的情况比较罕见，因此更精确。

带有空格 (

.a1 .b2

) 的选择器表示搜索类

a1

并查看该元素中是否存在类为 b2 的子元素或子子元素。

使用

>

选择器 (

.a1 .b2 > span

) 可以获得更高的准确度。这表明仅应考虑属于类 .b2 的直接子元素的 span 元素，这些元素位于类 a1 的元素中。

.a1 .b1 {
  color: green;
}

.a1.a2 .b1 {
  color: red;
}

.a1.a2 .b2 {
  font-style: italic;
  font-weight: bold;
}

.a1.a2 .b2 > span {
  color: orange;
}

<div class="a1">
  <div class="b1">Hello France</div>
  <div class="b1">Hello Spain</div>
  <div class="b2">Hello Sweden</div>
</div>
<hr/>
<div class="a1 a2">
  <div class="b1">Bye France</div>
  <div class="b1">Bye Spain</div>
  <div class="b2">
    Bye
    <span>World</span>
  </div>
</div>