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

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_16 .grid_8 {
    width: 460px;
}

width:460px 将仅应用于.grid_6 和.grid_8

编辑：这是一篇非常适合你的文章

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

Answer 3

逗号对类进行分组（对所有类应用相同的样式），空格表示后面的选择器必须在第一个选择器内。

因此

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

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

Answer 4

以上表示您将样式应用于两个类，用逗号表示。

当您看到两个并排的元素没有分开时，您可以假设它指的是一个区域内的一个区域。所以在上面，这种样式只适用于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”的区域内，例如：

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

Answer 5

.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 6

width: 460px; 将应用于具有.grid_8 类的元素，包含在具有.container_16 类的元素，以及具有.grid_6 类的元素，包含在带有.container_12 的元素内​​m>。

空格表示遗产，逗号表示“和”。如果您使用
.class-a, .class-b 之类的选择器放置属性，您将可以将属性应用于具有两个类中的任何一个的元素。

希望我有所帮助。

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.&lt/p>
</div>

Answer 8

不完全是问什么，但也许这会有所帮助。

要仅当元素同时具有两个类时才将样式应用于元素，您的选择器不应在类名之间使用空格。

例如：

.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 9

Selectors combinations get different meanings - attached image explains easily

a) 以逗号分隔的多个选择器 (,) - 相同的样式应用于所有选定的元素。

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

这里边框样式应用于DIV元素和CSS类.elmnt-color应用元素。

<!-- comma example -->
<div>
  Red border applied
</div>
<p class="elmnt-color">
  Red border applied
</p>

b) 由空格分隔的多个选择器——这些选择器称为后代选择器。

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

这里的边框样式应用于 CSS 类 .elmnt-color 应用的元素，它们是 DIV 元素的 子 元素。

<!-- space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border applied
  </p>
</div>

c) 不带空格指定的多个选择器 - 这里的样式应用于满足所有组合的元素。

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

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

<!-- no space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border NOT applied
  </p>
</div>
<div class="elmnt-color">
  Red border applied
</div>

详情附在https://www.csssolid.com/css-tips.html

注意：CSS 类只是 CSS 选择器之一。这些规则适用于所有 CSS 选择器（例如：类、元素、ID 等）。