在css 3中选择多一个类

Question

今天我正在查看我发现的一些示例代码，并注意到开发人员使用了＆＃34; +＆＃34;而不是＆＃34;，＆＃34;选择两个班级。

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

＆＃34; +＆＃34;标志做＆＃34;，＆＃34;没有按＆＃39;吨？你为什么要用它？奇怪的是，同一个班级在这里被选中了两次。为什么？

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

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

Answer 1

他们不一样！

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

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

.region, .region{}

实际上不会执行.region{}本身不会执行任何操作。

邻接选择器（MDN article）

  

（+）这被称为相邻选择器。它只会选择   紧跟在前者指定的指定元素   元件。

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

Answer 2

+ 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"

的样式

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)选择器将是{{1}}