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

小编典典

css

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

.element .symbol {}

和

.element.large .symbol {}

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

阅读 385

2020-05-16

共1个答案

小编典典

我认为您对第一个含义有一些误解。

.element .symbol {}

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

2020-05-16