Question

我有这个创建x轴的D3代码：

svg.append("g")
  .attr("class", "x axis")
  .call(xAxis)

如何在css文件中选择x轴？我有：

.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

但这适用于我的所有轴（x轴和y轴）。如何仅选择x轴？我知道css选择器可以级联，但我不确定如何做到这一点...

Answer 1

Class names cannot have spaces。如果您的班级名称有空格，您有2个班级。如果您想引用它，请使用x-axis作为您的班级名称。

...其中没有一个是空格字符[0]

[0] http://www.w3.org/TR/html5/infrastructure.html#set-of-space-separated-tokens

Answer 2

从技术上讲，它是两个独立的类，x和轴，但这并不意味着你不能只选择和影响你想要的x轴。级联选择器如下所示：

.x.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

Answer 3

对于任何有空格的班级：

[class*=" "]
{
/* css */
}

x axis：

[class="x axis"]
{
/* css */
}

不使用CSS属性选择器的替代方法：

.x
{
/* any element with class "x" */
}
.axis
{
/* any element with class "axis" */
}
.x.axis
{
/* any element with classes "x" and "axis"
/* this is what you're after */
}

Answer 4

@ self的评论是正确的。如果您的班级名称之间有空格，则您有两个班级名称。

您的代码应如下所示：

svg.append("g")
  .attr("class", "x-axis")
  .call(xAxis)

CSS：

.x-axis {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

您使用两个类的原因是更改元素。像这样：

$( "#addClass" ).click(function() {
  $( "#box" ).toggleClass("big");
});

.box {
  width: 100px;
  height: 100px;
  background: black;
  transition: all 0.5s;
  }

.big {
  width: 200px;
  height: 200px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="box" class="box"></div><button id="addClass">Resize the div</button>

我希望这会帮助你。如果您还有其他问题，请在下面提问。

快乐的编码！

Answer 5

也许你比你想象的更近。多个类由空格分隔。 ~~我也从内存中想到，类名可能需要不止一个字符。~~所以你可以做类似下面的事情

svg.append("g")
  .attr("class", "horizontal axis")
  .call(xAxis)

CSS

.axis  line /*Common stuff for both axis*/
{
      fill: none;
      shape-rendering: crispEdges;
}

.axis.horizontal line /*Specific to horizonal axis*/
{
   stroke: black;
}

.axis.vertical line /*Specific to vertical axis*/
{
   stroke: red;
}

注意：我能找到的最接近某个类需要多个字符的来源是：https://stackoverflow.com/a/2192121/4665。它没有引用其他来源和.x validates。因此，请随意使用x和y

CSS：选择一个名称有空格的类？

5 个答案: