CSS 语法：“.one.column”“.two.column”，我读对了吗？答案

【问题标题】：CSS syntax: ".one.column" ".two.column", am I reading this right?CSS 语法：“.one.column”“.two.column”，我读对了吗？
【发布时间】：2012-07-26 08:21:33
【问题描述】：

我刚刚发现了使用网格的 Skeleton 样板。这是github上的css：https://github.com/dhgamache/Skeleton/blob/master/stylesheets/skeleton.css

不同的列类布局.one.columns、.two.columns等

我以前没有在 CSS 中看到过这种语法。

我是否可以假设.one.columns {} 与.one, .columns {} 不同，因为前者仅影响class="one columns" 的元素，而后者影响class="one" 和class="columns" 的两个元素？

即：

.one.columns = .one AND .columns
.one, .columns =  .one OR .columns

【问题讨论】：

标签： html css syntax css-selectors

【解决方案1】：

.class1.class2 {} 指的是具有both 类class1 和class2 的所有元素。

.class1 .class2 {} 指的是类class2 的所有元素，它们是类class1 的元素的后代。

.class1, .class2 {} 指的是具有/或类class1 和/或类class2 的所有元素。

【讨论】：

【解决方案2】：

你是对的。

在没有空格的情况下将它们链接在一起匹配所有存在的类。

它们之间的逗号表示选择任何与逗号分隔的选择器匹配的元素。

【讨论】：

【解决方案3】：

当 CSS 选择器连接时，它们都必须应用于要选择的元素。正如div.foo 表示是 div 并且还具有类 foo 的元素一样，.one.columns 表示具有类 one 并且还具有类 columns 的元素。

当 CSS 选择器用逗号分隔时，这意味着样式适用于匹配第一个选择器的任何元素，也适用于匹配第二个选择器的任何元素。正如h1, h2 的意思，这些样式适用于h1 元素和h2 元素，.one, .columns 表示样式适用于所有类为one 的元素，也适用于所有类为@987654331 的元素@。

【讨论】：