在css 3中选择多一个类

Question

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

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

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

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

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

Answer 1

他们是不一样的!

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

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

.region, .region{}

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

邻接选择器(MDN文章)

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

考虑到这一点,.region + .region{}只会将样式应用于.region另一个样式,而不是单独应用或第一个样式.