使用父类来设置下一个元素的样式

Question

我有这样的代码块。

<div class="wrapper">
 <div class="btn-group">
  <div class="child">
  </div>
 </div>
</div>

我需要设计风格＆＃34;孩子＆＃34;没有直接造型的div。像

.child{
color:red;
}

我需要使用＆＃34;包装＆＃34; div风格适用于＆＃34; child＆＃34; div但不适用＆＃34;包装＆＃34;。

我试过用这个但没有运气。有什么建议？

.wrapper > .btn-group + .child{
color:red;
}

Answer 1

div + p

选择紧跟在<p>元素之后的所有<div>个元素。

您需要使用>（选择直接孩子

＆＃13;

＆＃13;

.wrapper > .btn-group > .child {
  color: red;
}

＆＃13;

<div class="wrapper">
  <div class="btn-group">
    <div class="child">
      Hello
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用direct child selector或descendant selector代替adjacent sibling selector，因为它的孩子是.btn-group，而不是兄弟姐妹。

.wrapper > .btn-group > .child{
  color:red;
}

// or 

.wrapper > .btn-group  .child{
  color:red;
}

＆＃13;

＆＃13;

.wrapper > .btn-group > .child{
color:red;
}

＆＃13;

<div class="wrapper">
 <div class="btn-group">
  <div class="child">sss
  </div>
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用.wrapper > .btn-group .child。检查下面更新的代码段...

＆＃13;

＆＃13;

.wrapper > .btn-group .child{
    color:red;
}

＆＃13;

<div class="wrapper">
div wrapper
 <div class="btn-group">
 div btn group
  <div class="child">
  Div Child
  </div>
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果你不想遵循整个标记结构，你也可以使用这样的东西

.wrapper .child {
color:red
}

Answer 5

.wrapper>.btn-group>.child {color:red}