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

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

.element .symbol {}

and

.element.large .symbol {}

我不明白这两者之间的区别。第一行表示对两个不同的类应用相同的样式。但是关于第二点，‘是什么意思?大写的'是附着在'.element'后面的?

当前回答

.element .symbol

意思是。element里面的。symbol

.element.symbol

表示同时具有类符号的.element。

So,

.element.large .symbol

表示.element中的.symbol，该类也是大的。

其他回答

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

.element .symbol {}

意味着这些CSS设置被应用到包含类.element的元素中的任何带有类.symbol的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选择器的文档。

你可以使用.element .symbol将一个元素放在另一个元素中。例如:

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

如果你想要区分一些div，你可以添加一个额外的类来只针对那些不同的类，并以.element为目标。大.symbol。举个例子:

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

使用

.element.large

引用包含两个类的元素:

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

而不是元素的后代:

.element .large

意思是:

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

only

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

正在接收样式。

基本上，被一个空间分隔意味着两个具有后代关系的元素。

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

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

表(边界)。Clname表示带有border属性和Clname类的表，而table [border] . Clname表示带有Clname类的元素，位于带有border属性的元素中，位于表中。

(编辑:好吧，我说的是“一个HTML元素”，但当然你可以有多个适用于这个的表。你理解。)

.element .symbol

意思是。element里面的。symbol

.element.symbol

表示同时具有类符号的.element。

So,

.element.large .symbol

表示.element中的.symbol，该类也是大的。

推荐文章