Question

/* Core style */

#preview #icon {
    display:block;
    margin: 0 auto;
    margin-top: 100px;
    width:250px;
    height:250px;
    cursor:pointer;
}
.donut {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}
.donut i {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: #000000;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}


/* Circle O Times icon */
.donut.circle-o-times i {
  border-radius: 0%;
  -webkit-transform: rotate(45deg) scale(0.5, 0.125);
  -moz-transform: rotate(45deg) scale(0.5, 0.125);
  -ms-transform: rotate(45deg) scale(0.5, 0.125);
  -o-transform: rotate(45deg) scale(0.5, 0.125);
  transform: rotate(45deg) scale(0.5, 0.125);
}
.donut.circle-o-times i:nth-child(1) {
  border-radius: 50%;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}
.donut.circle-o-times i:nth-child(2) {
  border-radius: 50%;
  -webkit-transform: scale(0.65);
  -moz-transform: scale(0.65);
  -ms-transform: scale(0.65);
  -o-transform: scale(0.65);
  transform: scale(0.65);
}
.donut.circle-o-times i:nth-child(3) {
  border-radius: 0%;
  -webkit-transform: rotate(-45deg) scale(0.5, 0.125);
  -moz-transform: rotate(-45deg) scale(0.5, 0.125);
  -ms-transform: rotate(-45deg) scale(0.5, 0.125);
  -o-transform: rotate(-45deg) scale(0.5, 0.125);
  transform: rotate(-45deg) scale(0.5, 0.125);
}

<!DOCTYPE html>
<html>

<body>
  <div id="preview">
    <i id="icon" class=" donut circle-o-times ">
    <i style="background-color:#FF6600"></i>
    <i style="background-color:rgb(255, 255, 255)"></i>
    <i style="background-color:#FF6600"></i>
    <i style="background-color:#FF6600"></i>
    </i>
  </div>
</body>

</html>

我正在尝试删除html中的颜色样式属性并在我为图标设置动画之前将它们移动到css

当我在css nth-childs中指定background-color并删除html样式时，任何东西都不再有效

我哪里错了？

Answer 1

您不能覆盖在html标记中声明的样式。如果要覆盖css，则必须在类中添加background-color:#FF6600，然后可以使用nth-child覆盖它。例如

<div id="preview">
<i id="icon" class=" donut circle-o-times ">
       <i class="differentclass"></i>
</i>
</div>

CSS

.differentclass{
    background-color:#FF6600;
}
.donut.circle-o-times i:nth-child(1) {
    background-color:#FFFFFF;
}

Answer 2

这是html

的修改版（无法正常工作）

<div id="preview">
<i id="icon" class=" donut circle-o-times "></i>
</div>

和css

#preview #icon {
display:block;
margin: 0 auto;
margin-top: 250px;
width:250px;
height:250px;
cursor:pointer;
}
.donut {
position: relative;
display: inline-block;
vertical-align: bottom;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
.donut i {
position: absolute;
display: block;
width: 100%;
height: 100%;
opacity: 1;
background: #000000;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
.donut.circle-o-times i {
border-radius: 0%;
background-color:#FF6600;
-webkit-transform: rotate(45deg) scale(0.5, 0.125);
-moz-transform: rotate(45deg) scale(0.5, 0.125);
-ms-transform: rotate(45deg) scale(0.5, 0.125);
-o-transform: rotate(45deg) scale(0.5, 0.125);
transform: rotate(45deg) scale(0.5, 0.125);
}
.donut.circle-o-times i:nth-child(1) {
border-radius: 50%;
background-color:#FFF;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
.donut.circle-o-times i:nth-child(2) {
border-radius: 50%;
background-color:#FF6600;
-webkit-transform: scale(0.65);
-moz-transform: scale(0.65);
-ms-transform: scale(0.65);
-o-transform: scale(0.65);
transform: scale(0.65);
}
.donut.circle-o-times i:nth-child(3) {
border-radius: 0%;
background-color:#FF6600;
-webkit-transform: rotate(-45deg) scale(0.5, 0.125);
-moz-transform: rotate(-45deg) scale(0.5, 0.125);
-ms-transform: rotate(-45deg) scale(0.5, 0.125);
-o-transform: rotate(-45deg) scale(0.5, 0.125);
transform: rotate(-45deg) scale(0.5, 0.125);
}

nth-child选择器不会覆盖html元素样式

2 个答案: