文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS跳过或跳过交替div类:nth-of-type或:nth-child

问CSS跳过或跳过交替div类:nth-of-type或:nth-child
EN

Stack Overflow用户
提问于 2016-08-31 02:51:22
回答 2查看 303关注 0票数 0

尝试选择三分之一(扬声器) div来清除内容集中在一起的浮点。

每一秒div都是一个模式弹出&它似乎与nth儿童或nth of type冲突？

请参阅下面的示例，我已经注释掉了最上面的行模式类。

​

代码语言：javascript
复制
.custom-speakers .speaker:nth-of-type(2n+1)
{
	clear:both;
	background:#FAFAFA;
	border:1px solid #FFF;
}
代码语言：javascript
复制
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>STEP OVER EVERY MODAL NTH-CHILD / NTH-OF-TYPE</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">


</head>

<body>
<div class="container">
    <div class="row custom-speakers">
    	<div class="speaker col-sm-6"><h2>SPEAKER 1</h2></div>
        <!--<div class="modal fade"></div>-->
        <div class="speaker col-sm-6"><h2>SPEAKER 2</h2></div>
        <!--<div class="modal fade"></div>-->
        <div class="speaker col-sm-6"><h2>SPEAKER 3</h2></div>
        <!--<div class="modal fade"></div>-->
        <div class="speaker col-sm-6"><h2>SPEAKER 4</h2></div>
        <!--<div class="modal fade"></div>-->
        <div class="speaker col-sm-6"><h2>SPEAKER 5</h2></div>
        <!--<div class="modal fade"></div>-->
        <div class="speaker col-sm-6"><h2>SPEAKER 6</h2></div>
        <!--<div class="modal fade"></div>-->
        <div class="speaker col-sm-6"><h2>SPEAKER 7</h2></div>
        <!--<div class="modal fade"></div>-->
        <div class="speaker col-sm-6"><h2>SPEAKER 8</h2></div>
        <!--<div class="modal fade"></div>-->
        <div class="speaker col-sm-6"><h2>SPEAKER 9</h2></div>
        <!--<div class="modal fade"></div>-->
        <div class="speaker col-sm-6"><h2>SPEAKER 10</h2></div>
        <!--<div class="modal fade"></div>-->
        <div class="speaker col-sm-6"><h2>SPEAKER 11</h2></div>
        <!--<div class="modal fade"></div>-->
    </div>
    <br>
    <hr>
    <br>
    <div class="row custom-speakers">
    	<div class="speaker col-sm-6"><h2>SPEAKER 1-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 2-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 3-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 4-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 5-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 6-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 7-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 8-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 9-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 10-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 11-2</h2></div>
        <div class="modal fade"></div>
    
    </div>
</div>
</body>
</html>

​

css
css-selectors
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-09-01 02:56:19

这似乎是可行的：

​

代码语言：javascript
复制
.custom-speakers>div:nth-child(4n+5)
{
	clear:both;
	background:#ddd;
	border:1px solid #FFF;
}
代码语言：javascript
复制
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>STEP OVER EVERY MODAL NTH-CHILD</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">


</head>

<body>
<div class="container">
    <div class="row custom-speakers">
    	<div class="speaker col-sm-6"><h2>SPEAKER 1-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 2-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 3-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 4-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 5-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 6-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 7-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 8-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 9-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 10-2</h2></div>
        <div class="modal fade"></div>
        <div class="speaker col-sm-6"><h2>SPEAKER 11-2</h2></div>
        <div class="modal fade"></div>
    
    </div>
</div>
</body>
</html>

​

票数 0
EN

Stack Overflow用户

发布于 2016-08-31 03:13:25

这与模式弹出无关。:nth-of-type()只选择其类型(标记、元素)的第n个子级。不幸的是，没有CSS选择器，如nth类.

根据@Eduardo (css3 nth of type restricted to class)，我们可以在感兴趣的元素中添加一个特殊类：

代码语言：javascript
复制
$(".custom-speakers .speaker").filter(function(index){
    return index % 2 == 0;
}).addClass("interested-speaker");
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39240003

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

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