CSS类.foo.bar(没有空格)和.foo .bar(带空格)之间有什么区别

Question

可能重复:
CSS中.classA.classB和.classA .classB之间的区别？

你能解释一下这两个CSS类语法之间的区别吗:

.element .symbol {}

和

.element.large .symbol {}

我不明白两者之间的区别.第一行表示应用相同样式的两个不同类.但是关于第二个问题,".great"的含义是什么？附加在'.element'上的'.large'是什么意思？

Answer 1

.element .symbol

.symbol在里面意味着.element

.element.symbol

意味着.element也有类symbol.

所以,

.element.large .symbol

意味着.symbol内部.element也有类large.

Answer 2

我认为你对第一个意味着什么有点误解.

.element .symbol {}

意味着这些CSS设置应用于任何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选择器文档的链接.

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,你可以添加一个额外的类来仅针对不同的那些,并用它来定位.element.large .symbol.所以,例如:

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