与自己相同的风格意味着什么?

时间:2011-11-29 19:30:16

标签: css css-selectors

我知道,这没有任何意义。看看这里,你会明白我的意思

http://jsfiddle.net/thirtydot/q6Hj8

它所在的部分

.yourDivClass + .yourDivClass {....

似乎消除了最终Div的封闭式。这是达到这种效果的常用方法吗?

3 个答案:

答案 0 :(得分:6)

W3C CSS规范的每个部分5.7: Adjacent sibling selectors :(格式清晰)

  

相邻的兄弟选择器具有以下语法:E1 + E2,其中   E2是选择器的主题。选择器匹配

     
      
  1. E1和E2   在文档树中共享同一个父级和
  2.   
  3. E1紧接着   E2,忽略非元素节点(如文本节点和注释)。
  4.         

    因此,以下规则表明当P元素立即出现时   遵循MATH元素,它不应缩进:

    math + p { text-indent: 0 }
    

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

在你的jsfiddle示例中,这意味着'margin-left'将应用于整个/两个类/ es (因为两个选择器在你的例子中是相同的)仅适用于元素在您的代码中跟随它自己。尝试

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

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

请注意,Internet Explorer 6将接受任何这些选择器! IE7及更高版本可以做到!

答案 1 :(得分:1)

这意味着您正在寻找.yourDivClass直接在另一个.yourDivClass之后的兄弟姐妹。

答案 2 :(得分:1)

Adjacent Sibling selector在现代浏览器中得到了相当好的支持。这对于某些事物的样式非常有用,例如标题后的第一段或两个有序列表中的第二段等。