Question

我注意到当你用JS附加文本时，一些样式规则起作用而其他样式规则停止工作。具体来说，请考虑我的css样式规则，即在悬停时创建border-bottom ...

var svg = d3.select('body')
        .append('svg')
        .attr('height',200)
        .attr('width',200);

svg.append('a')
    .append('text')
    .html('This is not a text.')
    .attr('font-size', '14px')
    .attr('class', 'content-text-1')
    .attr('x', 10)
    .attr('y', 20);

.content-text-1:hover {
    border-bottom: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
</body>

我不认为这是一种“异步”类型的问题，因为当我创建其他内容时，例如svg rects或circles（仅举几例），它们可以是事后的风格。

问题：导致border-bottom无法显示的原因是什么？

Answer 1

授予div而不是svg因为svg具有唯一身份而不支持border-bottom。

＆＃13;

var div = d3.select('body')
        .append('div')
        .attr('height',200)
        .attr('width',200);

div.append('a')
    .append('text')
    .html('This is not a text.')
    .attr('font-size', '14px')
    .attr('class', 'content-text-1')
    .attr('x', 10)
    .attr('y', 20);

＆＃13;

.content-text-1:hover {
    border-bottom: 1px solid blue;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
</body>

＆＃13;

Answer 2

这里的问题不是CSS，而是SVG。 SVG不支持border-bottom属性。

例如，如果你有HTML元素，你可以清楚地看到CSS有效：

var div = d3.select('body')
  .append('div')
  .html('This is not a text.')
  .style('font-size', '14px')
  .attr('class', 'content-text-1');

.content-text-1:hover {
  border-bottom: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

无法将CSS样式应用于SVG文本元素

2 个答案: