我正在尝试使用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>
答案 0 :(得分:3)
使用:nth-of-type()
没有意义,因为您的所有元素都是div
。
使用:nth-child()
代替4n+3
。
从第三个开始选择每四个元素。
.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
元素。
.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;
答案 1 :(得分:1)
为什么不把分频器更改为水平规则? 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>
答案 2 :(得分:0)
我会摆脱所有额外的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>
答案 3 :(得分:0)
不确定这是否有帮助,但这适用于以下表格:
<!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>