Question

CSS ::after与content和attr()结合使用，可以将任何attr值作为伪元素内容插入。

出于一般调试目的，我希望在所有HTML元素上附加一个黄色标签，内容作为元素的名称。

我可以用CSS做id和。

但是对于元素（p div span等），javascript是唯一的选择吗？

Answer 1

是的，您必须使用javascript或jQuery才能更轻松： DEMO

HTML测试

<div>
</div>
<p></p>
<form></form>  
<span></span>

CSS测试

[data-tag]:before {content:attr(data-tag);}

jQuery

$("body").children().each(function() {
  var domel= $(this).get(0);
  $(this).attr("data-tag",domel.nodeName);
})

它产生了这个：

<div data-tag="DIV"></div>

Answer 2

jQuery可以select某个类型/标记的所有元素，我建议使用它。

Answer 3

如果我理解正确，您想要执行以下操作，而您不需要javascript。

http://jsbin.com/wepayija/3/edit

<style>
p::after {
  background-color: yellow;
  content: 'p'
}

.my-class::after {
  background-color: green;
  content: 'p'
}

div:after {
  background-color: yellow;
  content: 'div'
}
</style>

<p>I have no class</p>
<p class="my-class">I have a class</p>

<div></div>

如何最好地将元素名称附加到每个HTML元素？

3 个答案: