CSS 跳过或跳过交替的 div 类：nth-of-type 或 :nth-child答案

【问题标题】：CSS step over or skip alternating div class :nth-of-type or :nth-childCSS 跳过或跳过交替的 div 类：nth-of-type 或 :nth-child
【发布时间】：2017-01-07 11:27:03
【问题描述】：

尝试选择每三个（扬声器）div 以清除内容集中在一起的浮动。

每隔一个 div 就是一个模态弹出窗口，它似乎与 nth-child 或 nth-of-type 冲突？

请参阅下面的示例，其中我已注释掉顶行模式类。

.custom-speakers .speaker:nth-of-type(2n+1)
{
	clear:both;
	background:#FAFAFA;
	border:1px solid #FFF;
}

<!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

【解决方案1】：

这与模态弹出无关。 :nth-of-type() 只选择其 type（标签、元素）的第 n 个子节点。不幸的是，没有像 nth-of-class 这样的 CSS 选择器。

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

$(".custom-speakers .speaker").filter(function(index){
    return index % 2 == 0;
}).addClass("interested-speaker");

【讨论】：

感谢您的回答，但我想我用 CSS 得到了它 .custom-speakers>div:nth-child(4n+5) { clear:both;背景：#ddd;边框：1px 实心#FFF； }

【解决方案2】：

这似乎有效：

.custom-speakers>div:nth-child(4n+5)
{
	clear:both;
	background:#ddd;
	border:1px solid #FFF;
}

<!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>

【讨论】：