无法通过<u>标签选择器设置text-underline-offset，但<a>标签可正常生效
2026-8-8
为什么标签的text-underline-offset样式无法生效？如何解决？
你尝试用属性选择器给标签设置下划线偏移，但样式没生效，代码如下：
CSS：
u[JSON Fetch Request example] { text-underline-offset: 3px; }
HTML：
<h1><u>JSON Fetch Request example</u></h1>
而用属性选择器选中指定href的标签时样式能正常生效：
CSS：
a[href="https://cnn.com/"] { color: red; }
HTML：
<a href="https://cnn.com/">cnn</a>
原因分析
你的标签CSS选择器写法完全错误。属性选择器的语法是元素[属性名="属性值"]，比如a标签的a[href="xxx"]，是选中带有href属性且属性值为指定内容的a元素。但你写的u[JSON Fetch Request example]既没有指定属性名，也没有正确的属性值格式，浏览器根本识别不了这个选择器，自然不会给目标标签应用样式。
而且你的标签本身就没有任何自定义属性，就算要写属性选择器，也得先给标签加属性才行。
解决方法
根据你的需求，有几种可行的解决方式：
- 给标签添加class属性，通过类选择器选中：
HTML修改为：
CSS修改为：<h1><u class="custom-underline">JSON Fetch Request example</u></h1>u.custom-underline { text-underline-offset: 3px; } - 如果这个标签是页面中唯一的，或是h1下的唯一u标签，可以用后代选择器直接选中：
h1 u { text-underline-offset: 3px; } - 若坚持想用属性选择器，可给标签添加自定义属性后再选中：
HTML修改为：
CSS修改为：<h1><u data-text="JSON Fetch Request example">JSON Fetch Request example</u></h1>u[data-text="JSON Fetch Request example"] { text-underline-offset: 3px; }
内容的提问来源于stack exchange，提问作者Michael36
相关产品推荐
相关产品推荐
