为何按钮内文本无法被text-decoration:line-through命中？如何解决？

按钮文本不受影响的原因 #

浏览器自带的默认样式会给<button>这类表单元素强制设置text-decoration: none，这个默认样式的优先级比父元素继承来的line-through更高，所以哪怕你给root元素加了划线样式，按钮里的文本也不会跟着变。

几种可行的解决方法 #

方法1：用状态+CSS类控制（推荐React场景使用） #

React更推荐用状态驱动UI，避免直接操作DOM样式，代码更易维护：

1. 给组件添加状态管理：

import { useState } from 'react';

function App() {
  const [showStrike, setShowStrike] = useState(false);

  return (
    <div className={`container ${showStrike ? 'strike-all' : ''}`}>
      <Form state={userIsRegistered} />
      <button onClick={() => setShowStrike(true)}>strike</button>
      <button onClick={() => setShowStrike(false)}>unstrike</button>
    </div>
  );
}

2. 写对应的CSS规则：

/* 让容器下所有元素都显示划线 */
.strike-all * {
  text-decoration: line-through !important;
}

要是不想用!important，可以精准指定元素：

.strike-all,
.strike-all button,
.strike-all input::placeholder {
  text-decoration: line-through;
}

方法2：直接操作DOM修改按钮样式 #

如果想保留原有的DOM操作逻辑，修改函数同时处理按钮：

function strike(){
  const root = document.getElementById("root");
  root.style.textDecoration = "line-through";
  // 遍历所有按钮设置划线
  document.querySelectorAll("#root button").forEach(btn => {
    btn.style.textDecoration = "line-through";
  });
}

function unstrike(){
  const root = document.getElementById("root");
  root.style.textDecoration = null;
  // 移除按钮的划线样式
  document.querySelectorAll("#root button").forEach(btn => {
    btn.style.textDecoration = null;
  });
}

方法3：重置按钮的默认样式 #

提前在CSS里让按钮继承父元素的文本装饰样式：

button {
  text-decoration: inherit;
}

这样你给root设置line-through时，按钮会自动继承这个样式，不用额外修改JS代码。

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