我正在创建一个由半颗星组成的评级控件,我希望能够在 .rating 控件中选择奇数和偶数标签。选择器应该看起来像这样,但它在这里不起作用是我的 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';
}
最佳答案
使用 nth-of-type
而不是 nth-child
label:nth-of-type(odd) {
background-color:red;
}
nth-child
寻找所有的 child ,不管他们的类型,其中 nth-of-type
寻找特定类型
关于css奇偶选择器不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44405093/