更改基于子项

父项的背景颜色我想改变navbar-header类的背景颜色，当锚元素的具有active类。更改基于子项

菜单中打开

<div class="navbar-header"> 
    <a class="navbar-toggle active" data-target=".navbar-collapse" data-toggle="collapse" href="#" aria-expanded="true"> 
     <ul class="bar-icon-wrapper"> 
      <li class="bar-icon"></li> 
      <li class="bar-icon"></li> 
      <li class="bar-icon"></li> 
     </ul> 
    </a> 
</div>

MENU折叠

<div class="navbar-header"> 
    <a class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" href="#" aria-expanded="false"> 
     <ul class="bar-icon-wrapper"> 
      <li class="bar-icon"></li> 
      <li class="bar-icon"></li> 
      <li class="bar-icon"></li> 
     </ul> 
    </a> 
</div>

我试过几件事，但因此未工作。

像

.navbar-header:has(a.active) { backbround-color:red;}

这可能与只是作为我不想使用jQuery这个CSS。

来源

2016-04-26 Learning

你问[有一个CSS选择器父？]（http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector） –

我用同样的例如但是它力的工作 – Learning

好耶，作为回答指出：“截至2015年，这是不是可以在任何浏览器。” –

您可以使用的absolute/relative行为CSS属性，如果您的最终代码不与它进行交互：

的想法是静态的地位打下一个孩子绝对positionned伪元素的父这是在相对位置作为参考。

然后伪元素用于绘制背景悬停初始背景被隐藏。

.navbar-header { 
 
    background:red; 
 
    position:relative; 
 
} 
 
.active ul{/* you want to see the menu :) */ 
 
    position:relative; 
 
    z-index:1; 
 
} 
 
.active:before { 
 
    content:''; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    background:lime; 
 
}

<div class="navbar-header"> 
 
    <a class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" href="#" aria-expanded="false"> 
 
     <ul class="bar-icon-wrapper"> 
 
      <li class="bar-icon">non a.active child</li> 
 
      <li class="bar-icon">non a.active child</li> 
 
      <li class="bar-icon">non a.active child</li> 
 
     </ul> 
 
    </a> 
 
</div> 
 
<div class="navbar-header"> 
 
    <a class="navbar-toggle active" data-target=".navbar-collapse" data-toggle="collapse" href="#" aria-expanded="true"> 
 
     <ul class="bar-icon-wrapper"> 
 
      <li class="bar-icon">a.active child</li> 
 
      <li class="bar-icon">a.active child</li> 
 
      <li class="bar-icon">a.active child</li> 
 
     </ul> 
 
    </a> 
 
</div>

来源

2016-04-26 13:11:23

更改基于子项

回答

相关问题