我创建了由半星组成的评级控件,我希望能够在.rating控件中选择奇数和偶数标签。选择器shoudl看起来像这样,但它不在这里工作是我的codepen检查我的html在你那里
.rating {
label:nth-child(odd)::before {} // not working
}
.rating {
label:nth-child(even)::before {} // not working
}
完整的CSS:
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
background: #272727;
}
.rating {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
label {
font-size: 24px;
font-family: FontAwesome;
color: #afa302;
}
label.half_l::before {
content: '\f006';
display: inline-block;
width: 11px;
overflow: hidden;
}
label.half_r {
width: 12px;
position: relative;
overflow: hidden;
display: inline-block;
margin-right: 3px;
}
label.half_r::before {
content: '\f006';
display: inline-block;
left: -11px;
position: relative;
}
label {
float: right;
}
label:hover {
color: #fff239;
}
> input {
display: none;
}
label.half_l:hover:before,
label.half_l:hover ~ label.half_l:before {
content: '\f089';
color: #fff239;
}
label.half_l:hover ~ label.half_r::before {
content: '\f005';
color: #fff239;
}
label.half_r:hover:before {
content: '\f005';
color: #fff239;
}
label.half_r:hover ~ label.half_r::before,
label.half_r:hover ~ label.half_l:before {
content: '\f005';
color: #fff239;
}
input[type=radio]:checked ~ label.half_l:before,
input[type=radio]:checked ~ label.half_r:before{
content: '\f005';
}
}
答案 0 :(得分:3)
使用nth-of-type
代替nth-child
label:nth-of-type(odd) {
background-color:red;
}
nth-child
查找所有孩子,无论其类型如何,nth-of-type
寻找某种类型
答案 1 :(得分:2)
如果要使用nth-child
选择器,您需要绕过input
,因为无论其类型如何都会计算所有孩子
nth-child(4n+4)
从第4个元素(您的第二个标签)开始,然后计入每个第4个并应用规则,在您的情况下将是每个甚至标签
nth-child(4n+2)
从2:nd元素(您的第一个标签)开始,然后计算到每4:并应用规则,在您的情况下将是每个奇数标签
注意,也可以使用nth-child(4n)
而不是nth-child(4n+4)
,它将从0:th元素(不存在)开始,然后计入每4:<。 / em>的
.rating {
label:nth-child(4n+4)::before {
background: yellow;
}
}
.rating {
label:nth-child(4n+2)::before {
background: blue;
}
}