技术问询：如何从上层类main继承样式？链接样式优先级问题

嘿，我来帮你搞定这两个CSS问题～

CSS里很多属性（比如字体、颜色、行高）默认就会从父元素继承，但如果需要主动指定某个属性继承上层.main类的样式，或者覆盖其他冲突样式的话，可以用inherit关键字，这是最直接的方法。

举个例子：

/* 上层main类的样式 */
.main {
  color: #2c3e50;
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.5;
}

/* 子元素继承main的样式 */
.main .card {
  /* 主动继承main的文字颜色 */
  color: inherit;
  /* 字体和行高会默认继承，不用额外写，除非你需要覆盖 */
}

如果想让子元素继承所有可继承的属性，还可以用all: inherit（注意这个属性在现代浏览器都支持，老IE除外）：

.main .full-inherit-element {
  all: inherit;
}

另外要注意：不是所有CSS属性都能继承（比如宽高、边框、背景这些），这类属性没法通过inherit继承，只能手动复制父元素的样式，或者用CSS变量来复用：

.main {
  --main-bg: #f5f5f5;
  background: var(--main-bg);
}

.main .child {
  background: var(--main-bg); /* 复用main的背景色 */
}

你说!important无效，大概率是因为你把!important加在了<a>的样式上，但<span class="metalink">的样式是直接作用在span元素本身的，优先级比父元素的样式更高，父元素的!important不会覆盖子元素的样式。解决这个问题得从针对span本身入手，有两种常用方法：

方法1：让span继承的链接样式 #

直接给a内部的span.metalink设置inherit，让它继承a的所有链接相关属性：

/* 覆盖span.metalink的样式，让它继承a的属性 */
a span.metalink {
  color: inherit;
  text-decoration: inherit;
  font-weight: inherit;
  /* 把metalink类里设置过的属性都用inherit，就能完全继承a的样式 */
}

因为a的链接伪类（:link、:visited、:hover、:active）会改变a的样式，span继承这些属性后，就会跟着a的状态变化，和普通链接效果一致。

方法2：直接给a内的span设置和链接一致的样式 #

如果metalink的样式比较复杂，或者你想更精准控制，可以直接针对a的不同状态给span写样式，这样优先级会比单独的.metalink更高：

/* 未访问的链接 */
a:link span.metalink {
  color: #007bff;
  text-decoration: underline;
}

/* 已访问的链接 */
a:visited span.metalink {
  color: #6c757d;
}

/* 鼠标悬停时 */
a:hover span.metalink {
  color: #0056b3;
  text-decoration: none;
}

这样写的话，哪怕.metalink有自己的样式，也会被这些更具体的选择器覆盖，不需要!important也能生效。

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