CSS相对改变继承

时间:2017-12-28 09:19:55

标签: css inheritance colors

是否可以执行类似

的操作
color: inherit + #222;

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

3 个答案:

答案 0 :(得分:1)

在普通的CSS中,这是不可能完成的。如果使用SCSS,则可以使用特殊功能

最黑暗(#222,10%) 减轻(#222,10%)

答案 1 :(得分:1)

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

有关Color valuesCSS 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>

答案 2 :(得分:-1)

使用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'