Question

这是一个我不明白的例子：

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

在我看来，width: 460px适用于上述所有课程。但是为什么有些类用逗号分隔（,），有些只用空格分隔？

我假设width: 460px仅适用于那些以CSS文件中提到的方式组合类的元素。例如，它将应用于<div class='container_12 grid_6'>，但不会应用于<div class='container_12'>。这个假设是否正确？

Answer 1

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

那说“将所有.grid_6放在.container_12中，所有.grid_8放在.container_16的460像素宽范围内。”因此，以下两个内容将呈现相同的内容：

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

至于逗号，它将一个规则应用于多个类，如下所示。

.blueCheese, .blueBike {
  color:blue;
}

它在功能上等同于：

.blueCheese { color:blue }
.blueBike { color:blue }

但是减少了冗长。

Answer 2

.container_12 .grid_6 { ... }

此规则匹配具有类container_12的DOM节点，该类具有类grid_6的后代（不一定是子项），并将CSS规则应用于具有类grid_6的DOM元素

.container_12 > .grid_6 { ... }

在它们之间放置>表示grid_6节点必须是具有类container_12的节点的直接子节点。

.container_12, .grid_6 { ... }

正如其他人所说，逗号是一种将规则同时应用于许多不同节点的方法。在这种情况下，规则适用于具有container_12或grid_6类的任何节点。

Answer 3

不完全是被问到的，但也许这会有所帮助。

要将样式应用于元素，只要它具有两个类，您的选择器应该在类名之间不使用空格。

例如：

.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }

<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>

Answer 4

逗号对类进行分组（将相同的样式应用于所有类），空格表示以下选择器必须位于第一个选择器中。

因此

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

将该样式仅应用于.grid_6类内的.container_12类，以及.grid_8内的.container_16类。

Answer 5

width: 460px;将应用于具有.grid_8类的元素，内包含具有.container_16类的元素，以及具有{{1}的元素}}，包含 in 元素.grid_6。

空间意味着遗产，逗号意味着'和'。如果您使用选择器（例如）放置属性 .container_12，您将使用这两个类中的任何一个将属性应用于元素。

希望我有所帮助。

Answer 6

上述意味着您将样式应用于两个类，用逗号表示。

当你看到两个并排的元素没有分开时，你可以认为它指的是一个区域内的一个区域。所以在上面，这个样式只适用于container_12类中的grid_6类和container_16类中的grid_8类。

示例中的

：

<div class="grid_6">This is not effected</div>
<div class="container_12">
  <div class="grid_6">
    This is effected.
  </div>
</div>

第二个grid_6类将不会影响第一个grid_6，因为它包含在container_12中。

像

这样的陈述

#admin .description p { font-weight:bold; }

只会在ID为“admin”的区域内具有类“description”的区域中应用粗体

标记，例如：

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>

Answer 7

您的示例中有四个类和两个选择器：

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

因此.container_12和.grid_6都是类，但规则width: 460px仅适用于具有.grid_6类的元素，这些元素是元素的后代.container_16班。

例如：

<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>

Answer 8

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

width:460px仅适用于.grid_6和.grid_8

编辑：这是一篇非常好的文章

http://css-tricks.com/multiple-class-id-selectors/

Answer 9

Selectors combinations get different meanings - attached image explains easily

a）用逗号（“，”）分隔的多个选择器-相同的样式应用于所有选定的元素。

div,.elmnt-color {
   border:1px solid red;
}

此处边框样式应用于DIV元素和CSS类（.elmnt-color）应用的元素。

b）多个选择器，它们之间用空格隔开–这些选择器称为后代选择器。

div .elmnt-color {
background-color:red;

}

此处边框样式适用于CSS类（.elmnt-color）应用的元素，这些元素是DIV元素的子元素。

c）指定了多个没有空格的选择器-此处，样式适用于满足所有组合的元素。

div.elmnt-color {
    border:1px solid red;
}

此处边框样式仅应用于CSS类（.elmnt-color）应用的DIV元素。

详细信息附在https://www.csssolid.com/css-tips.html

注意：CSS类是CSS选择器之一。上面的规则适用于所有CSS选择器（例如：类，元素，ID等）。

CSS中多个类中的逗号和空格是什么意思？

9 个答案: