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

【问题标题】：nth-child selector doesn't override html element stylenth-child 选择器不会覆盖 html 元素样式
【发布时间】：2016-08-09 01:23:42
【问题描述】：

/* 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 中指定背景颜色并删除 html 样式时，没有任何效果了

我哪里错了？

【问题讨论】：

您没有覆盖第 n 个子选择器中的任何内联 html 样式，我所看到的只是边框半径和变换，但在 html 中是背景颜色......所以没有应该发生覆盖......
你能发布一个演示这个问题的sn-p吗？此外，“不再有效”可以做一些详细说明。
上面的代码显示了原始设置。如果我删除四个 html 样式属性（为四个“circle-o-times”css 元素着色）并在相应的 css 元素中指定背景颜色，则图标会折叠。
@mick 好的，你能把它编辑成问题吗？这会让事情变得更清楚。我不确定会发生什么；通常一个元素不会通过添加或删除背景颜色来改变它的大小。确定删除 style 属性后什么都不做？

标签： css parent-child css-animations combinators

【解决方案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;
}

【讨论】：

OP 说，当他们删除 html 样式（我认为它们是指样式属性）时，没有任何效果了。
但他明确表示“当我在 css nth-childs 中指定背景颜色并删除 html 样式时，我哪里出错了？”
另外，你应该强调!important只能作为最后的手段（以防html样式属性无法删除），否则将面临严重的否决！
我不想覆盖 html 样式属性；他们必须走！
我需要创建一段干净的代码以在 wordpress 主题中使用，由于我不熟悉这种编码，我必须确保 1) 所有自定义都可以在wordpress 自定义 css 和 2) 代码尽可能干净以避免冲突。

【解决方案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);
}

【讨论】：