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

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

.element .symbol {}

而且

.element.large .symbol {}

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

83135 次浏览
小开 
.element .symbol

意思是.symbol在.element里面

.element.symbol

意思是.element，它也有类symbol。

所以,

.element.large .symbol

意思是.symbol在.element里面，这个.element也有类large。

小开

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

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

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

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

小开

使用

.element.large

引用具有这两个类的元素:

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

而不是元素的后代:

.element .large

意思是:

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

只有

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

正在接收样式。

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

小开

你可以使用.element .symbol this，当你有一个元素在另一个元素中。例如:

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

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

<div class="element large">
<i class="symbol"></i>
</div>
小开
最佳答案

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

.element .symbol {}

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


提交答案