如果其他同级拥有类别，则在兄弟上运行CSS

有没有办法在纯CSS中执行以下操作：如果我的rds-trigger-button的课程活跃，我希望tab div可见，否则将被隐藏。如果其他同级拥有类别，则在兄弟上运行CSS

HTML：

<div> 
    <div class="rds-trigger-button"><span class="rds-carrot">&#9660;</span> Learn More</div> 
    <div class="tab"> 
     Cardigan organic four loko, Etsy art party Godard jean shorts. Chillwave next level letterpress lumbersexual wolf jean shorts, church-key ugh vegan typewriter PBR four loko. Occupy whatever chillwave, pug tote bag organic migas High Life hoodie flannel Schlitz small batch distillery DIY. 
    </div> 
</div>

CSS：

.rds-trigger-button{ 
    border: 1px blue solid; 
    width:100px; 
    padding:12px; 
    position:relative; 
} 
.rds-trigger-button.active{ 
    border-bottom:1px white solid; 
    z-index:9999; 
} 
.rds-trigger-button.active + .tabs{ 
    display:block !important; 
} 
.rds-carrot{ 
    font-size:10px; 
    color:#ccc; 
    padding-right:8px; 
} 
.tab{ 
    display:none; 
    position:absolute; 
    margin-top:-1px; 
    width:356px; 
    background-color:#fff; 
    min-height:50px; 
    padding:24px; 
    border: 1px #2E51A1 solid; 
}

http://jsfiddle.net/0sqoaxxs/2/

来源

2015-02-23 Luca DeCaprio

你已经回答了你的问题;使用相邻的兄弟选择器'A + B'。 – 2015-02-24 00:00:34

简化代码将是：

.tab { 
    display: none; 
} 
.rds-trigger-button.active + .tab { 
    display: block; 
}

Updated Example

在上面发布的代码中，您使用的是选择器.rds-trigger-button.active + .tabs。由于该元素的类是.tab（单数），而不是.tabs，因此未应用该元素。另外，您在您发布的示例中也使用了选择器.rds-trigger-button.active > .tabs。由于和因为.tab不是.rds-trigger-button.active的直接子女，所以它不起作用。

为了澄清，+是adjacent sibling combinator。顾名思义，它将选择直接邻接的兄弟元素。

在某些情况下，您可能还对general sibling combinator, ~感兴趣。

来源

2015-02-23 23:59:04

@LucaDeCaprio是的。它是一个CSS 2.1选择器，因此它在IE7及更高版本的http://caniuse.com/#feat=css-sel2中受支持。 – 2015-02-24 00:05:39

在.rds-trigger-button.active + .tabs年底获得.TAB取下S）

来源

2015-02-24 00:04:06 JBA

只需添加到你的CSS

.active ~ .tab{ 
    display: block; 
}

来源

2015-02-24 00:14:30

如果其他同级拥有类别，则在兄弟上运行CSS

回答

相关问题