Rails中link_to包裹元素内部文本下划线无法清除如何解决

你遇到的问题根源是text-decoration属性的渲染规则：下划线是由定义该属性的父元素绘制的，而非子元素继承后自己绘制。你之前所有给.sticky-note内部子元素加text-decoration: none的操作，都只是禁止子元素自己生成下划线，完全不会影响父级<a>标签本身绘制的下划线显示，所以不管加不加!important都不会生效。

• 打开浏览器开发者工具（F12/右键选择「检查」），选中渲染生成的<a href="/donate">元素，在「样式」面板查看text-decoration属性的来源：是浏览器默认的用户代理样式，还是项目全局CSS里定义的a标签通用样式。
• 确认你之前加的行内样式是不是加在了<h3>或<p>标签上：加在子元素上是无效的，必须加在<a>标签本身才会生效。

方案1：给link_to加自定义类（兼容性最好） #

修改Rails视图代码，给link_to添加专属类名：

<div class="col">
    <%= link_to page_path("donate"), class: "sticky-note-wrapper" do %>
        <div class="sticky-note">
            <h3>Donate</h3>
            <p>Give dollars or products.</p>
        </div> <!-- sticky note -->
    <% end %>
</div> <!-- col -->

然后写对应的CSS规则，直接作用于a标签本身：

a.sticky-note-wrapper:link,
a.sticky-note-wrapper:visited,
a.sticky-note-wrapper:hover,
a.sticky-note-wrapper:active {
  text-decoration: none;
}

方案2：直接按结构选择a标签 #

如果不想修改视图代码，也可以直接选中包含.sticky-note的a标签：

.col a {
  text-decoration: none;
}
/* 兼容更高版本浏览器的精准选择 */
.col a:has(.sticky-note) {
  text-decoration: none;
}

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