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

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

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

.element .symbol {} 

和

 .element.large .symbol {} 

我不明白两者的区别。 第一行表示应用相同样式的两个不同的类。 但关于第二个，“.element”写的“.large”是什么意思？

Answer 1

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

 .element .symbol {} 

意味着这些CSS设置应用于任何具有class .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 {} 

编辑：通过请求链接到CSSselect器的文档 。

Answer 2

 .element .symbol 

意思.symbol内部.element .symbol

 .element.symbol 

也意味着具有类symbol 。

所以，

 .element.large .symbol 

意味着.symbol里面的.symbol也large 。

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> 

Answer 5

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

通常，select器的每个部分都适用于一个HTML元素。

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

（编辑：嗯，我说“一个HTML元素”，但当然你可以有多个表格，这是适用的。