Question

我创建了以下scss定义：

.regionBackgroundHighlighter
{
    .highlight
    {
        fill:#CCCCCC;
        opacity:0.5;
        stroke:black;
        stroke-width:0;
        display:inline;
        visibility:visible;
    }
}

我正在尝试将此css类设置为元素，如下所示，但样式未应用：

d3.select(regionBackground).classed('regionBackgroundHighlighter highlight', true);

在Chrome开发工具中，regionBackground在其classList []中显示了regionBackgroundHighlighter和highlight，但实际样式未应用于该元素。但是，如果我将相同的类定义作为一级非嵌套类传递，则样式将按预期应用：

.regionBackgroundHighlight
{
    fill:#CCCCCC;
    opacity:0.5;
    stroke:black;
    stroke-width:0;
    display:inline;
    visibility:visible;
}

d3.select(regionBackground).classed('regionBackgroundHighlight', true);

我是否需要对我在上面第一个例子中定义的css结构类型使用d3 classed（）函数？

Answer 1

我怀疑scss是这样运作的。

当您像上面一样进行嵌套时，'highlight'样式将应用于具有类'regionBackgroundHighlighter'的元素内具有类'highlight'的任何元素。

上述scss需要的结构是：

<svg>
 <g class="regionBackgroundHighlighter">
  <g class="highlight">
  </g>
 </g>
</svg>

Answer 2

@ taran-j建议如何修复标记以匹配你的scss，反之亦然 - 修复你的scss：

.regionBackgroundHighlighter
{
  &.highlight
  {
    fill:#CCCCCC;
    opacity:0.5;
    stroke:black;
    stroke-width:0;
    display:inline;
    visibility:visible;
  }
}

这将使类不会嵌套在已编译的css中。

d3分类（）不能按预期工作多个班级？

2 个答案: