文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS覆盖不起作用(d3对象)

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

Stack Overflow用户

提问于 2013-08-19 16:41:16

回答 2查看 3.1K关注 0票数 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 (对于我的第二种类型，我需要一个不同的颜色)(这曾经是第一个将所有视界更改为horizon_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

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

css

d3.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-08-19 19:18:24

很多事情都是错误的，我回到了教程中的css注释。

(1)在css文件中，如果父文件是水平的，则以下方法应用horizon_small

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

而下面的方法同时适用地平线和horizon_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")

票数 2

Stack Overflow用户

发布于 2013-08-19 16:50:49

选择器".horizon .horizon_small“针对一个元素，其中包含一个类"horizon_small”(在某种程度上)，另一个元素具有类“horizon_small”。如果要只使用两个类的目标元素，则选择器应该是".horizon.horizon_small“。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18318868

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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