為什么我的內聯樣式不起作用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中的“矩形”樣式已覆蓋它一樣。 知道為什么會這樣嗎？

提前致謝。

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規則。 但是，由於它已經具有最高優先級，因此不需要。