css奇数甚至选择器不工作

时间:2017-06-07 06:29:22

标签: css css3 sass

我创建了由半星组成的评级控件,我希望能够在.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';
}

}

2 个答案:

答案 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;
  }
}

Updated codepen