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

this 你在另一个元素中有一个元素。例如：

<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

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

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

Answer 6

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

带空格的选择器 (

.a1 .b2

) 表示搜索类

a1

并查看此元素中是否有类 b2 的子元素或子元素。

使用

>

选择器（

.a1 .b2 > span

）可以获得更高的准确度。这说明只应考虑 span 元素，它们是类 .b2 的直接子元素，位于类 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>