Class 在css 3中选择多个类

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

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

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

这里是代码笔的链接

---

我只是学习CSS3，任何帮助都将不胜感激。谢谢他们不一样

+

是邻接选择器，例如选择

.region

元素之后的

.region

元素

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

.region, .region{}

实际上不会执行任何本身不会执行的操作

邻接选择器（）

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

---

考虑到这一点，

.region+.region{}

只会将样式应用于一个又一个

.region

，而不是孤立的一个或第一个。

这是而不是

的替代符号，

（逗号）：

+

具有完全不同的含义，因为它是直接同级选择器（或相邻选择器），因此您的规则仅在与上一个

.region

元素相邻时才与该元素匹配

如果您有几个兄弟

.region

元素，如下所示

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

。。。
...
...
...

.region+.region

将匹配除第一个元素外的每个

.region

元素

由于这是一个

CSS2

选择器，因此等效的

CSS3

选择器将是

。区域：第n个子（n+1）

+s和~s是兄弟 使用

.c、.x{}

将以相同的方式设置

“c”

和

“x”

的样式

没有空间意味着更多的条件

---

使用

.c.x{}

将设计

“cx”

我想我们需要强调的是，它们是不同的！hah@IanClark-完成，只为您！区域+。区域{}指在其前面有区域的所有区域。在区域列表中，除第一个区域外，这将适用于所有区域one@Johan-我意识到这不清楚，所以我已经澄清了最后一部分，谢谢你，只是我需要知道的。谢谢你的帮助！

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

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

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