如何使用d3选择伪元素？

Question

7

这个很好用：

d3.selectAll('ul li')
  .style('background', 'red');

然而，这不起任何作用：

d3.selectAll('ul li:before')
  .style('background', 'red');

d3.selectAll('ul li::before')返回的选择为空，尽管存在:before元素，并具有某些现有的CSS样式。

是否可以使用d3来定位伪元素？

如果可以，那么一个快速的跟进问题：如何直接定位所有在特定选择器上的:before伪元素（即不是在其内部）？

例如：

var listItems = d3.selectAll('ul li');
var beforeElements = listItems.selectAll('&:before'); // SASS-style selector obviously won't work here

- joshua.paling

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AmeliaBR · Accepted Answer

你的方式是行不通的。

基于querySelector方法的D3选择函数，永远不会返回伪元素选择器的结果。

此外，D3的style方法是通过在选定元素上设置内联样式属性来工作的。无法为伪元素设置内联样式，因此在父元素上设置样式属性也不起作用。

你可以选择父元素，给它们一个类名，然后使用CSS样式表规则来针对该类的对象的:before/:after伪元素。如果需要动态创建CSS规则，请参见这个Q&A。

但是，最简单的方法可能是创建空的或

子元素，并对其进行样式设置。