首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >选择具有nth子级的类

选择具有nth子级的类
EN

Stack Overflow用户
提问于 2014-06-10 12:47:51
回答 3查看 188关注 0票数 6

我正在寻找帮助使用第n-子CSS选择器。如果你看看我的HTML..。

代码语言:javascript
运行
复制
<div id="report">
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
</div>

...I有一排这样的字母:

代码语言:javascript
运行
复制
AAAABAAAABAAA

我只想显示第一个B和隐藏其他,但我似乎不能选择的类,我期待。当我试图使用:

代码语言:javascript
运行
复制
.b:nth-child(1){
    display: block;
}

.b:nth-child(n+2){
    display: none;
}

它不起作用,我必须使用(5)来选择它才能得到第一个B。

我们将非常感谢您的帮助。

JSFiddle:http://jsfiddle.net/SrM9T/1/

EN

Stack Overflow用户

回答已采纳

发布于 2014-06-10 12:56:45

这不需要javascript。

代码语言:javascript
运行
复制
.b ~ .b{
    display:none;
}   

http://jsfiddle.net/KYAj8/1/

通用同胞组合器

普通的同级组合子选择器非常类似于相邻的同级组合子选择器。不同的是,所选择的元素不需要立即继承第一个元素,而是可以出现在它之后的任何地方。

更多信息

票数 17
EN
查看全部 3 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24141394

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档