CSS相对改变继承

Question

是否有可能做类似的事情

color: inherit + #222;

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

Answer 1

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

关于Color values和CSS Variables的更多信息

像这样的东西。

: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'