0

我正在尝试应用我在 CSS 基础课程（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

但它不起作用，不知道问题出在哪里。

4

2 回答 2

2

很多事情都错了我从教程中回到我的 CSS 笔记

（1）在css文件中，如果父级是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")
于 2013-08-19T19:18:24.343 回答
1

选择器“.horizo​​n .horizo​​n_small”的目标是一个具有类“horizo​​n_small”的元素（在某种程度上）内部（在某种程度上）其他一些具有类“horizo​​n”的元素。如果你只想定位两个类的元素，选择器应该是“.horizo​​n.horizo​​n_small”。

来源：http ://www.w3.org/TR/CSS2/selector.html#class-html

于 2013-08-19T16:50:49.970 回答