选择嵌套的相邻元素

Question

我的语法如下：

<div class="parent">
   <div class="child">content</div>
</div>
<div class="parent">
   <div class="child">content</div>
</div>
<div class="parent">
   <div class="child">content</div>
</div>

我想设置兄弟姐妹的子元素，如下所示：

.parent .child + .parent .child {
/* Some pretty nice styles */
}

不幸的是这段代码不起作用。是否可以使用纯CSS3或仅在将来的版本4中使用？

Answer 1

你的问题不清楚。添加更多细节。查看这些Selectors

儿童组合器

相邻兄弟组合

一般兄弟组合

你的css意味着什么，

.parent .child + .parent .child {
/* Some pretty nice styles */
}

父母带着孩子，然后是另一位有孩子的父母。风格适用于第二个父母的孩子。

例如：

＆＃13;

＆＃13;

.parent .child + .parent .child {
  color: red;
}

＆＃13;

<div class="parent">
  a
  <div class="child">
    b
  </div>
  <div class="parent">
    a
    <div class="child">
      b
    </div>
  </div>
</div>
<div class="parent">
  a
  <div class="child">
    b
  </div>
  <div class="parent">
    a
    <div class="child">
      b
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

.parent  + .parent .child{
        background-color: red;
        height: 100px;
        width: 100px;
    }

＆＃13;

<div class="parent">
   <div class="child">content</div>
</div>
<div class="parent">
   <div class="child">content</div>
</div>
<div class="parent">
   <div class="child">content</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这可能有用。那是你要的吗？但考虑到父母是否互相追随，它会影响孩子们。所以它并不真正关心孩子。

如果你真的只想根据孩子选择你可以考虑一个jquery解决方案（你没有标记为jquery所以...）

Answer 3

由于括号在css中不存在，因此它会读取

.parent .child + .parent .child

as “父母内部的孩子紧跟父母内的孩子”。所以基本上你选择了：

<div class = "parent">
    <div class = "child"></div>
    <div class = "parent">
        <div class = "child"></div>
    </div>
 </div>

正如之前的一位评论者所指出的，解决方案是在parent1和parent2之间交替，并选择带有.parent1 + .parent2的div。