在CSS类（.class1 + .class2）中汇总CSS中的表示法

Question

我想我无法找到有目的的网络搜索词，所以我需要在这里提问。

有时我会看到这样的CSS语句：

.class1 {...}

.class2 {...}

.class1 + .class2 {...}

Q1）如果上面有3个CSS语句，CSS会理解什么？

Q2）我试图找到http://jsbin.com/detuxema/1/edit的线索，但它没有帮助。请你提供一个小例子

Answer 1

规则

.class1 + .class2 {
    color: blue;
    border: 1px solid orange;
}

仅在.class2生效，前一个兄弟是.class1。看看这三种情况的全面演示 http://jsfiddle.net/PzGb9/ 。

Answer 2

查看http://jsbin.com/detuxema/2/edit

在此示例中，

您的<p>元素包含课程class1和课程class2，另一个<p>元素包含课程class2。

第一个<p>元素的

将应用前两个规则，因为它具有class属性中的两个类

第3条规则仅适用于第2个<p>元素，因为该规则仅适用于直接兄弟

以下是有关兄弟选择器的更多信息

http://css-tricks.com/child-and-sibling-selectors