javascript - 为什么我的内联样式 CSS 不起作用

Question

我是新手。我不明白为什么“CSS”填充会覆盖我的“内联”填充。

#label_x,
#label_y {
  font-size: 130% !important;
}
rect {
  fill: #4aaeea;
}
#chart text {
  fill: black;
  font: 10px sans-serif;
  text-anchor: end;
}
.axis text {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #aaa;
  shape-rendering: crispEdges;
}
body {
  background: #fff;
  color: #eaeaea;
  padding: 10px;
}
.ch2 {
  fill: #e50000;
}

...一堆(D3)JavaScript:

bar.append("rect")
  .attr("y", function(d) {
    return yScale(d.with_Mobile_ALL);
  })
  .attr("x", function(d, i) {
    return xScale.rangeBand() + (padding) / 2.2;
    //+ x.rangeBand() / 2 + (padding/2 + (i+1)*0.1) ;   
  })
  .attr("height", function(d) {
    return h - yScale(d.with_Mobile_ALL) + top_padding;
  })
  .attr("width", xScale.rangeBand()) //set width base on range on ordinal data
  .on("mouseover", function() {
    d3.select(this)
      .attr("fill", "orange")
  });

我检查了标签，它显示:

<rect y="88.19999999999999" x="39.18181818181818" height="336.8" width="21" 
fill="orange"></rect>

但它还显示(在 CSS 检查器中)一条穿过橙色填充的线，就像它已被上面 CSS 中的“rect”样式覆盖一样。知道为什么会这样吗？

提前致谢。

Answer 1

您需要使用内联 style 属性而不是简单的 fill:

<rect y="88.19999999999999" x="39.18181818181818" height="336.8" width="21" style="fill: orange;"></rect>

由于 fill 属性不被视为 CSS 值，因此外部文件中的任何 CSS 都将覆盖此值。

如果你真的想让橙色持久存在，你可以在 orange 之后设置一个 !important 规则。但是，由于它已经具有最高优先级，因此不需要这样做。