要继承的 CSS 相对更改

Question

是否可以做类似的事情

color: inherit + #222;

因此，例如，我希望它们以比文本其余部分更亮的颜色展示。还是我必须写下每个可能有超链接的 html 标签？

Answer 1

好吧，

你可以使用HSL颜色和/或CSS变量。

有关颜色值和 CSS 变量的更多信息

像这样的东西。

:root {
  --color: 0, 0%;
  --luminosity: 0%;
}
a {
  --luminosity: 50%;
  color: hsl(var(--color), var(--luminosity));
  /* 
    Or simply
    color: hsl(0, 0%, 50%)
  */
}

<p>Yo i'm some random text, <a href="#">and I'm a stupid link</a></p>

Answer 2

在普通的CSS中，这是无法做到的。如果使用 SCSS，则可以使用特殊功能

最暗(#222， 10%(减轻(#222， 10%(

Answer 3

使用 javascript 来做同样的事情：如果您的 HTML 如下所示：

<div id='parent'>
    <div id='child'>
    </div>
</div>

然后在 JS 中，执行以下操作：

var parent = document.getElementById('parent')
var child = document.getElementById('child')
child.style.color = parent.style.color + '#yourNum'