Question

可能重复：
Difference between .classA.classB and .classA .classB in CSS?

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

.element .symbol {}

和

.element.large .symbol {}

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

Answer 1

.element .symbol

表示.symbol

中的.element

.element.symbol

表示同时拥有.element类的symbol。

所以，

.element.large .symbol

表示.symbol内的.element也包含large类。

Answer 2

我认为你误解了第一个意味着什么。

.element .symbol {}

表示这些CSS设置应用于具有类.symbol的元素内的类.element的任何HTML元素。

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

在此示例中，您的第一个CSS条目会影响中间的<div>标记。

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

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

因此，如果HTML看起来像这样，CSS值也将应用于内部<div>标记。

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

.element, .symbol {}

编辑：通过请求指向CSS选择器documentation的链接。

Answer 3

使用

.element.large

指的是具有两个类的元素：

<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，你可以添加一个额外的类来仅定位那些不同的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元素”，但当然你可以有多个适用的表。你明白。）