能否在<head>的<style>标签添加data-属性？合法性及使用咨询

完全不用担心，给<head>里的<style>标签添加data-*属性是符合HTML规范且能正常工作的。

为什么合法？ #

HTML标准里的*data-属性属于全局属性——也就是说，所有HTML元素（包括<style>）都支持这类自定义属性，不管它是放在<head>还是<body>里。全局属性的设计初衷就是让开发者可以给任意元素附加自定义数据，用于脚本操作或者其他自定义逻辑，完全在规范允许范围内。

用起来也很顺手 #

你想用data-style-id来区分不同<style>标签，方便JS/jQuery定位的需求非常合理。举个实际的例子：

<head>
  <style data-style-id="base-theme">
    :root { --primary-color: #2563eb; }
    body { font-family: sans-serif; }
  </style>
  <style data-style-id="modal-styles">
    .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  </style>
</head>
<script>
// 原生JS定位特定style标签
const modalStyleEl = document.querySelector('[data-style-id="modal-styles"]');
// 可以直接操作它的内容，比如动态修改样式
modalStyleEl.textContent += '.modal { background: white; padding: 2rem; }';

// jQuery写法更简洁
const baseThemeEl = $('[data-style-id="base-theme"]');
console.log('基础主题样式内容:', baseThemeEl.text());
</script>

关于资料少的原因 #

网上这类资料不多，主要是因为大部分场景下<style>标签要么是全局样式，要么通过id/class标识就够了，很少需要用data-*属性来区分。但这并不代表这种用法不合法，只是用的人相对少而已。

另外，兼容性也完全不用担心——所有现代浏览器（包括IE11）都支持data-*属性，不会出现兼容问题。

内容的提问来源于stack exchange，提问作者Mee