CSS 覆盖不起作用(d3 对象)

Question

我正在尝试应用我在 CSS 基础类(class) (codeschool) 中学到的知识来设置我的 d3 对象的样式，但到目前为止我还没有做对。

我有一堆 CSS 类来设置我的图表样式。我有两种类型的图表，对于第二种类型，我需要覆盖一种颜色。

主要 CSS(这不是我自己创建的)

.horizon {
  border-bottom: solid 1px #000;
  overflow: hidden;
  position: relative;
}

.horizon {
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}

.horizon + .horizon {
  border-top: none;
}

.horizon canvas {
  display: block;
}

.horizon .title,
.horizon .value {
  bottom: 0;
  line-height: 30px;
  margin: 0 6px;
  position: absolute;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  white-space: nowrap;
}

.horizon .title {
  left: 0;
}

.horizon .value {
  right: 0;
}

覆盖 CSS(对于我的第二种类型，我需要不同的颜色)(这曾经是第一个将所有视野更改为 horizo​​n_small 的文件，我知道这很糟糕。)

.horizon .horizon_small {
  border-top: solid 1px #bdbdbd;
  border-bottom: solid 1px #bdbdbd;
}

在这里应用:

 d3.select("#mychart")
   .selectAll(".horizon")
   .data(data).enter().insert("div", ".bottom")
   .attr("class", ["horizon", "horizon_small"]) // used to be "horizon_small" only

但是不行，不知道问题出在哪里。

Answer 1

很多地方都错了我回到教程中的 css 笔记

(1)在css文件中，下面的意思是如果parent是horizo​​n就应用horizo​​n_small

.horizon .horizon_small {
  border-top: solid 1px #bdbdbd;
  border-bottom: solid 1px #bdbdbd;
}

虽然下面的方法同时应用了 horizo​​n 和 horizo​​n_small(这是正确的版本)

.horizon.horizon_small {
  border-top: solid 1px #bdbdbd;
  border-bottom: solid 1px #bdbdbd;
}

接下来，感谢回答/评论，d3部分应该是这样的:

 d3.select("#mychart")
   .selectAll(".horizon .horizon_small")
   .data(data).enter().insert("div", ".bottom")
   .attr("class", "horizon horizon_small")