css - 自己+同款是什么意思？

Question

我知道，这没有意义。看看这里，你就会明白我的意思了

http://jsfiddle.net/thirtydot/q6Hj8

它所在的部分

.yourDivClass + .yourDivClass {....

好像是消除了Div结尾的封闭样式。这是实现该效果的常用方法吗？

Answer 1

每节5.7: Adjacent sibling selectors W3C CSS 规范:(为清楚起见，格式化)

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if

1. E1 and E2 share the same parent in the document tree and
2. E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

Thus, the following rule states that when a P element immediately follows a MATH element, it should not be indented:

math + p { text-indent: 0 }

它基本上意味着当 second 元素在相同的上下文中并且直接跟随代码中的 first 元素(中间没有任何其他元素)时，以下属性将被添加到第二个元素!

在您的 jsfiddle 示例中，这意味着“margin-left”将应用于整个/两个类/es(因为两个选择器在您的示例中相同)仅当 该元素在您的代码中跟随其自身，它确实如此。尝试

<div class="Yourclass">
<div class="cloneofyourclass">
<div class="Yourclass"> 

并且不会应用您的示例中的其他 margin-left。

请注意，Internet Explorer 6 不会接受任何这些选择器!不过 IE7 和更高版本就可以了!