css - CSS 类 .foo.bar （没有空格）和 .foo .bar （有空格）有什么区别

Question

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

.element .symbol {}

和

.element.large .symbol {}

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

score 313 · Accepted Answer

.element .symbol

意思是.symbol里面.element

.element.symbol

意味着.element也有课程symbol。

所以，

.element.large .symbol

表示.symbol里面.element也有类large。

score 172 · Accepted Answer

我想你对第一个的意思有一点误解。

.element .symbol {}

意味着这些 CSS 设置将应用于任何具有 class 的 HTML 元素，该.symbol元素位于具有 class 的元素内.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 选择器的文档。

score 36 · Accepted Answer

使用

.element.large

指具有两个类的元素：

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

而不是元素的后代：

.element .large

意思是：

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

只要

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

正在“接收”样式。

基本上，被空格隔开意味着两个有descendant关系的元素。

score 11 · Accepted Answer

您将.element .symbol在另一个元素内部有一个元素的情况下使用它。例如：

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

如果你想区分一些 div，你可以添加一个额外的类来只定位那些不同的，并用.element.large .symbol. 因此，例如：

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

score 1 · Accepted Answer

在您的第二个示例中，选择器的第一部分只是一个具有两个类的元素，如<span class="element large">or <span class="large element">。

通常，选择器的每一部分都适用于一个 HTML 元素。

table[border].clname表示具有边框属性和类 clname 的表，而table [border] .clname表示具有类 clname 的元素，在具有边框属性的元素中，在表中。

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

5 回答 5