CSS:选择名称中包含空格的类

CSS: select a class whose name has a space?

本文关键字：包含 空格 选择 CSS      更新时间：2023-09-26

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

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

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

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

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

类名不能有空格。 如果您的类名有空格，则您有 2 个类。如果要引用类名，请使用 x-axis 作为类名。

。这些都不是空格字符 [0]

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

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

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

@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>

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

祝您编码愉快！

对于任何带有空格的类：

[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 */
}

也许你比你想象的更接近。多个类由一个空格分隔。我还认为，从记忆中，类名可能需要不止一个字符。 因此，您可以执行以下操作

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验证。因此，请随意使用x和y

相关文章：