如何将CSS规则关联至子样式表，实现按钮样式统一维护？

嘿，我明白你想实现的是在多个样式表中复用同一个CSS类规则，不用重复写代码，只维护一处就能全局更新按钮样式对吧？你设想的那种url()引用类的写法其实不是CSS的标准用法，不过有几种靠谱的方法能完美实现你的需求：

这是最简单直接的方案——不管你有多少页面或者额外的样式表，只要在HTML的<head>里先引入你的mystyle.css，所有页面里用class="button"的元素都会自动应用里面的规则，后续修改只需要动mystyle.css这一个文件就行。

示例HTML代码：

<head>
  <!-- 先引入共享的按钮样式表 -->
  <link rel="stylesheet" href="mystyle.css">
  <!-- 再引入页面专属的样式表（如果有的话） -->
  <link rel="stylesheet" href="page-specific-styles.css">
</head>

如果某个页面需要调整按钮的个别样式，直接在专属样式表里写新规则覆盖就行，优先级会自动生效。

如果你的其他样式表必须依赖这个.button规则，可以在目标样式表的最顶部用@import导入mystyle.css，这样该样式表就能直接使用共享的按钮规则了。

示例page-specific-styles.css代码：

/* 必须放在样式表最开头，否则会失效 */
@import url("./mystyle.css");

/* 这里写页面专属样式，比如给特定按钮改个颜色 */
.page-special-button {
  background-color: #ff9999;
}

如果你以后需要给按钮做变体，又不想重复写整个规则，可以把按钮的公共属性定义成CSS变量，放在mystyle.css里，后续不管在哪个样式表都能引用这些变量，甚至修改变量值快速生成新样式。

mystyle.css示例：

/* 在根元素定义全局变量 */
:root {
  --button-font: Arial, Helvetica, sans-serif;
  --button-font-size: 30px;
  --button-height: 45px;
  --button-width: 140px;
  --button-bg: #9999ff;
  --button-radius: 25px;
}

.button {
  font-family: var(--button-font);
  font-size: var(--button-font-size);
  height: var(--button-height);
  width: var(--button-width);
  background-color: var(--button-bg);
  text-align: center;
  padding-top: 6px;
  border-radius: var(--button-radius);
}

在其他样式表里复用或修改：

/* 创建一个警告按钮变体 */
.warning-button {
  /* 复用基础按钮的所有变量，只改背景色 */
  font-family: var(--button-font);
  font-size: var(--button-font-size);
  height: var(--button-height);
  width: var(--button-width);
  text-align: center;
  padding-top: 6px;
  border-radius: var(--button-radius);
  /* 自定义颜色 */
  background-color: #ffcc00;
}

如果用Sass/LESS这类预处理器，还能通过@extend语法直接继承.button的规则，不用手动重复变量。

内容的提问来源于stack exchange，提问作者Tv's Very Own