【问题标题】：Selecting more that one class in css 3 [duplicate]在css 3中选择一个以上的类[重复]
【发布时间】：2014-04-18 09:20:53
【问题描述】：

今天我在查看我找到的一些示例代码，并注意到开发人员使用“+”而不是“，”来选择两个类。

.region + .region{
    border-left: 1px solid lightgray;
    padding-left: 3.5%;
    margin-left: 4%;
}

“+”号有什么作用，而“，”没有？你为什么要使用它？奇怪的是，同一个班级在这里被选了两次。为什么？

我只是在学习 CSS3，如果有任何帮助，我们将不胜感激。谢谢

【问题讨论】：

【解决方案1】：

它们不一样！

+ 是邻接选择器，例如选择.region 元素之后的.region 元素。

逗号分隔的列表仅允许您将一个样式块应用于多个类，因此：

.region, .region{}

实际上不会执行任何只有 .region{} 自己不会执行的操作。

邻接选择器 (MDN article)

(+) 这称为相邻选择器。它只会选择紧跟在前一个指定元素之后的指定元素元素。

记住这一点，.region + .region{} 只会将样式应用于.region 在另一个之后，而不是孤立地或第一个。

【讨论】：

【解决方案2】：

这不是,（逗号）的替代表示法：+ 具有完全不同的含义，因为它是直接兄弟选择器（或相邻选择器），所以你的规则仅当 .region 元素与另一个先前的 .region 元素相邻时才匹配它。

如果你有几个兄弟.region元素，像这样

<div class="region">...</div>
<div class="region">...</div>
<div class="region">...</div>
<div class="region">...</div>

.region + .region 将匹配除第一个之外的每个 .region 元素。

由于这是一个CSS2 选择器，因此等效的CSS3 选择器将是.region:nth-child(n+1)

【讨论】：

【解决方案3】：

+s 和 ~s 是兄弟姐妹

<div>
    <div class="c"></div>
    <div class="x"></div>
    <div class="y"></div>
</div>

使用.c + div {} 将设置"x" 的样式CSS 只能向下工作！

,s 是多个类

<div>
    <div class="c"></div>
    <div class="x"></div>
</div>

使用.c, .x {} 将以相同的方式设置"c" 和"x" 的样式。

<div>
    <div class="c x"></div>
    <div class="c"></div>
    <div class="x"></div>
</div>

使用.c.x {} 将样式"c x"

【讨论】：