如何通过初始类在CSS中取消不可编辑的覆写样式？

针对你遇到的两个核心问题——取消无法编辑的覆写样式、让输入框样式同步初始类的border变化，这里有一套符合最佳实践的方案：

一、取消无法编辑的覆写样式，回归初始样式 #

首先要解决的是被强制覆盖的border样式，优先通过提升选择器特异性来解决，尽量避免滥用!important：

1. 升级选择器特异性 #

找到那个无法编辑的覆写代码的选择器（比如它可能是.theme-override .section_form input），你需要写一个更具体的选择器来覆盖它。比如结合初始类和输入框的层级：

/* 假设初始类是输入框的祖先元素类，比如.page-container */
.page-container .section_form input {
  border: /* 这里写你想要的初始border样式，或者用下面的变量 */;
}

CSS的特异性权重规则是：ID(100) > 类/伪类(10) > 元素选择器(1)，只要你的选择器权重比覆写代码高，就能生效。

2. 万不得已时使用!important #

如果那个无法编辑的覆写代码本身用了!important，那你只能用!important来覆盖，但要注意这是最后手段，因为它会打乱正常的样式层级：

.section_form input {
  border: 1px solid #ccc !important; /* 替换成你的初始样式 */
}

二、让输入框样式依赖初始类的border变化 #

要实现“初始类border变，输入框跟着变”的效果，最优雅的方式是用CSS自定义属性（变量），它支持继承和动态更新：

1. 给初始类添加变量（通过覆写） #

因为你不能编辑原有初始类的代码，所以通过覆写来注入变量，把初始类的border属性拆成可复用的变量：

/* 覆写初始类，添加变量存储border的各个部分 */
.initial-class {
  --border-width: 1px;
  --border-style: solid;
  --border-color: #ccc;
  /* 保留原有border样式，或者直接用变量重新定义（如果原有样式允许） */
  border: var(--border-width) var(--border-style) var(--border-color);
}

2. 输入框样式使用变量 #

在你写的输入框覆写样式中，直接引用这些变量，同时保证选择器特异性足够：

.initial-class .section_form input {
  /* 直接复用初始类的border变量 */
  border: var(--border-width) var(--border-style) var(--border-color);
  /* 也可以单独复用某一部分，比如只同步宽度和颜色 */
  /* border-width: var(--border-width);
  border-color: var(--border-color); */
}

这样一来，当初始类的border被改成2px solid pink时，只需要更新变量（如果是其他人修改，也建议他们通过变量修改）：

.initial-class {
  --border-width: 2px;
  --border-color: pink;
}

输入框的border样式会自动同步变化，完全不需要修改输入框的CSS代码。

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