Question

我正在尝试使用CSS选择器:nth-of-type替换元素的样式，但我没有达到我的预期。我有一些divs是“部分”或“分隔符”，我想用其他边距和背景颜色设置每个其他部分的样式。

使用:nth-of-type(even)不会选择我正在猜测的任何部分，因为它们之间存在一个元素，并且该选择器仅将其索引计为子级。看到我的HTML从一个部分开始，它的编号将是1-3-5-7。将选择器更改为(odd)会使所有部分变为绿色。

下图显示了我想要实现的目标。任何人都可以帮助我这样做而无需像“右”和“左”这样的类硬编码吗？我希望用纯CSS和我提供的HTML来做到这一点。

.divider{
  width: 100%;
  border-bottom: 1px solid black;
}
.section{
  width: 50%;
  height: 10vh;
  background-color: lightblue;
}
.section:nth-of-type(even){
  background-color: lightgreen;
  margin-left: 50%;
}

<div class="section"></div>
<div class="divider"></div>
<div class="section"></div>
<div class="divider"></div>
<div class="section"></div>
<div class="divider"></div>
<div class="section"></div>

Answer 1

使用:nth-of-type()没有意义，因为您的所有元素都是div。

使用:nth-child()代替4n+3。

从第三个开始选择每四个元素。

＆＃13;

.divider{
  width: 100%;
  border-bottom: 1px solid black;
}
.section{
  width: 50%;
  height: 10vh;
  background-color: lightblue;
}
.section:nth-child(4n+3){
  background-color: lightgreen;
  margin-left: 50%;
}

＆＃13;

<div class="section"></div>
<div class="divider"></div>
<div class="section"></div>
<div class="divider"></div>
<div class="section"></div>
<div class="divider"></div>
<div class="section"></div>

＆＃13;

如果您可以更改标记，则可以使用nth-of-type定位section元素。

＆＃13;

.divider {
  width: 100%;
  border-bottom: 1px solid black;
}
.section {
  width: 50%;
  height: 10vh;
  background-color: lightblue;
}
.section:nth-of-type(even) {
  background-color: lightgreen;
  margin-left: 50%;
}

＆＃13;

<section class="section"></section>
<div class="divider"></div>
<section class="section"></section>
<div class="divider"></div>
<section class="section"></section>
<div class="divider"></div>
<section class="section"></section>

＆＃13;

Answer 2

为什么不把分频器更改为水平规则？ div.divider无其他用途。

.divider{
  width: 100%;
  border-bottom: 1px solid black;
}
.section{
  width: 50%;
  height: 10vh;
  background-color: lightblue;
}
.section:nth-of-type(even){
  background-color: lightgreen;
  margin-left: 50%;
}
hr{
  border-width: 0 0 1px;
  margin: 0;
}

<div class="section"></div>
<hr class="divider">
<div class="section"></div>
<hr class="divider">
<div class="section"></div>
<hr class="divider">
<div class="section"></div>

Answer 3

我会摆脱所有额外的div并改为使用背景渐变。

.section{
  height: 10vh;
  border-bottom: 1px solid #000;
  background: #00c9e0; /* Old browsers */
  background: -moz-linear-gradient(left,  #00c9e0 0%, #00c9e0 50%, #ffffff 50%, #ffffff 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #00c9e0 0%,#00c9e0 50%,#ffffff 50%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #00c9e0 0%,#00c9e0 50%,#ffffff 50%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c9e0', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

}
.section:nth-of-type(even){
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(left,  #ffffff 0%, #ffffff 50%, #ffffff 50%, #00f264 50%, #00f264 50%, #00f264 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #ffffff 0%,#ffffff 50%,#ffffff 50%,#00f264 50%,#00f264 50%,#00f264 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #ffffff 0%,#ffffff 50%,#ffffff 50%,#00f264 50%,#00f264 50%,#00f264 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00f264',GradientType=1 ); /* IE6-9 */

}

<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>

Answer 4

不确定这是否有帮助，但这适用于以下表格：

<!DOCTYPE html>
<html>
<body>
    <style type="text/css">
        tr:nth-child(even) {
            background-color: #FFF8D6;
        }
    </style>

    <table>
        <tr>
            <td>1</td><td>Row 1</td>
        </tr>
        <tr>
            <td>2</td><td>Row 2</td>
        </tr>
    </table>
</body>
</html>

使用具有分割div的nth-type选择器来设置每隔一个div的样式

4 个答案: