Question

我对此非常陌生。我无法弄清楚为什么＆＃34; CSS＆＃34;填写覆盖我的＆＃34;内联＆＃34;填。

#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风格。知道为什么会这样吗？

提前致谢。

Answer 1

您需要使用内联style属性，而不仅仅是普通fill：

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

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

如果您确实希望橙色持续存在，则可以在!important之后设置orange规则。但是，由于它已经具有最高优先级，因此不需要这样做。

为什么我的内联样式不适用于CSS

1 个答案: