javascript - CSS 获取父元素属性

Question

所以我刚刚遇到了这个问题。假设我有以下标记:

<article data-color='#123456'>
    <header>...</header>
    <a href='#'>Lorem ipsum</a>...
    ...
</article>

所以我有一个带有自定义颜色属性的元素。我想让标题将其作为背景颜色，并将链接作为颜色(颜色是随机生成的或用户定义的)。有没有办法仅靠 CSS 来做到这一点？ (我知道 jQuery 可以毫无问题地执行此操作，但我希望尽可能保持美观，而不是单独使用 Javascript 进行样式设置。)

Answer 1

您可以在 CSS 中使用属性选择器:

article[data-color="#123456"] header {
    background-color: "#123456";
}

article[data-color="#123456"] a {
    color: "#123456";
}

但是，这假定您可以在 CSS 中枚举 data-color 属性。如果它是动态生成的并且可以取任何值，那么您不能在 CSS 中这样做——它没有变量或反向引用。