在css 3中选择多一个类[重复]

Question

这个问题在这里已有答案：

• What does the “+” (plus sign) CSS selector mean? 11个答案

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

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

“+”符号表示“，”不是什么？你为什么要用它？奇怪的是，同一个班级在这里被选中了两次。为什么？

这是代码笔的链接... http://codepen.io/adobe/pen/vKixh

我只是学习CSS3，任何帮助将不胜感激。谢谢

Answer 1

+s and ~s Are Siblings

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

使用.c + div {}将风格"x" CSS只工作向下！

,s Are Multiple Classes

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

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

No Space Means More Conditions

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

使用.c.x {}将风格"c x"

Answer 2

他们是不一样的！

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

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

.region, .region{}

实际上不会执行任何只有.region{}本身不会行动的行动。

邻接选择器（MDN article）

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

考虑到这一点，.region + .region{}只会将样式应用于另一个之后的.region，而不是孤立的或第一个。

Answer 3

这不是,（逗号）的另一种表示法：+具有完全不同的含义，因为它是直接兄弟选择器（或相邻选择器），所以只有当它与另一个先前的.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)