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

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

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

.element .symbol {} 

 .element.large .symbol {} 

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

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

 .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器的文档 。

 .element .symbol 

意思.symbol内部.element .symbol

 .element.symbol 

也意味着具有类symbol

所以,

 .element.large .symbol 

意味着.symbol里面的.symbollarge

运用

 .element.large 

指的是有两个类的元素:

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

而不是一个元素的后代:

 .element .large 

这意味着:

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

只要

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

是“接受”风格。

基本上 ,被一个空间隔开意味着有两个具有descendant关系的元素。

你可以使用.element .symbol这里你有一个元素在另一个元素内。 例如:

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

如果您想要区分某些div,您可以添加一个额外的类,仅针对那些不同的目标,并使用.element.large .symbol目标。 所以,例如:

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

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

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

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

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