CSS 类 .foo.bar（不带空格）和 .foo .bar（带空格）有什么区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10036156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)
提问by Nicero
Would you please explain me the difference between these two CSS classes syntax:
你能解释一下这两个 CSS 类语法之间的区别吗：
.element .symbol {}
and
和
.element.large .symbol {}
I don't understand the difference between the two. The first line indicates two different classes to which are applied the same styles. But about the second, what's the meaning of '.large' which is written attached to '.element'?
我不明白两者之间的区别。第一行表示应用了相同样式的两个不同类。但是关于第二个，附加到“.element”的“.large”是什么意思？
采纳答案by Nitram
I think you got a slight misunderstanding what the first one means.
我想你对第一个意思有点误解。
.element .symbol {}
Means that those CSS settings are applied to any HTML element with the class .symbolthat is inside an element with the class .element.
意味着这些 CSS 设置将应用于具有 class.symbol的元素内的任何具有 class 的 HTML 元素.element。
<div class="element">
<div class="symbol" />
</div>
In this example your first CSS entry would affect the <div>tag in the middle.
在这个例子中，你的第一个 CSS 条目会影响<div>中间的标签。
Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.
您的第二个示例意味着第一个类需要影响两个类。除此之外，它等于第一个。
<div class="element large">
<div class="symbol" />
</div>
So if the HTML looks like this, the CSS values will be applied to the inner <div>tag as well.
因此，如果 HTML 看起来像这样，CSS 值也将应用于内部<div>标记。
If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:
如果要分别设置适用于多个类的 CSS 标签，则需要使用逗号将它们分开。所以它看起来像这样：
.element, .symbol {}
Edit:By request the link to the documentationof the CSS selectors.
编辑：通过请求指向CSS 选择器文档的链接。
回答by Ricardo Souza
.element .symbol
means .symbolinside .element
意味着.symbol里面.element
.element.symbol
means .elementthat has the class symbolas well.
意味着.element也有类symbol。
So,
所以，
.element.large .symbol
means .symbolinside .elementthat has the class largeas well.
意味着.symbol里面.element也有这个类large。
回答by Hawken
Using
使用
.element.large
refers to an element with bothclasses:
指具有两个类的元素：
<div class="element large"></div>
rather than a descendant of an element:
而不是元素的后代：
.element .large
meaning that in:
意思是在：
<div class="element">
<div class="large"></div>
</div>
only
只要
<div class="large"></div>
is 'receiving' the styles.
正在“接收”样式。
Basically, being separated by a space implies two elements with a descendantrelationship.
基本上，被空格分隔意味着两个元素之间存在descendant关系。
回答by Chords
You would use .element .symbolthis where you have an element inside of another element. For example:
您可以.element .symbol在另一个元素中有一个元素时使用它。例如：
<div class="element">
<i class="symbol"></i>
</div>
If down the road you wanted to differentiate some divs, you could add an additional class to target only those that differ, and target it with .element.large .symbol. So, for example:
如果以后您想区分某些 div，您可以添加一个额外的类来仅针对那些不同的 div，并使用.element.large .symbol. 因此，例如：
<div class="element large">
<i class="symbol"></i>
</div>
回答by Mr Lister
In your second example, the first part of the selector is simply an element with two classes, as in <span class="element large">or <span class="large element">.
在您的第二个示例中，选择器的第一部分只是一个具有两个类的元素，如 in<span class="element large">或<span class="large element">。
In general, each part of a selector applies to one HTML element.
通常，选择器的每一部分都适用于一个 HTML 元素。
table[border].clnamemeans a table with a border attribute and a class of clname, while table [border] .clnamemeans an element with class clname, in an element with a border attribute, in a table.
table[border].clname表示具有边框属性和类 clname 的表，而table [border] .clname表示具有类 clname 的元素，在具有边框属性的元素中，在表中。
(Edit: well, I say "one HTML element", but of course you can have more than one table that this applies to. You understand.)
（编辑：好吧，我说的是“一个 HTML 元素”，但当然你可以有多个适用于此的表格。你明白。）
