如何为data-attribute内无class的HTML标签设置样式？

直接写在data-*属性里的HTML标签本质是字符串，不会被浏览器解析为实际的DOM元素，所以CSS无法直接选中它设置样式。要解决这个问题，需要先把data属性里的HTML内容渲染成真实的DOM节点，再用CSS选择器设置样式。

步骤1：用JavaScript渲染data属性中的HTML #

先获取目标元素，取出data-box的字符串内容，再将其插入到页面中成为DOM元素。

示例代码：

<div data-box="<h1> A Simple Heading</h1>" class="target-container"> This is a tag that has a data-attribute with html tag. </div>

<script>
// 获取目标容器
const container = document.querySelector('.target-container');
// 取出data-box中的HTML字符串
const htmlFromData = container.dataset.box;
// 将HTML插入到容器内部（这里选择放在原有内容之后）
container.insertAdjacentHTML('beforeend', htmlFromData);
</script>

步骤2：用CSS选择器设置样式 #

当HTML被渲染成真实DOM后，就可以通过父元素选择器直接选中这个h1：

/* 选中.target-container下的所有h1 */
.target-container h1 {
  color: #2c3e50;
  font-weight: 600;
  border-bottom: 2px solid #3498db;
}

如果需要更精准的选择（比如页面中有其他h1），也可以结合渲染时的位置做精确匹配：

/* 选中.target-container的最后一个子元素h1 */
.target-container h1:last-child {
  /* 自定义样式 */
}

内容的提问来源于stack exchange，提问作者Asma Binta Younus