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中使用它-它没有变量或反向引用。

Answer 2

不幸的是CSS无法做到这一点。 JS比较简单：

$('article').filter(function() {
    return $(this).data('color');
}).each(function() {
    var $el = $(this), color = $el.data('color');
    $el
        .find('header').css('background-color', color).end()
        .find('a').css('color', color);        
});

小提琴的例子

Answer 3

我认为您可以这样做：

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

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

UPDATE

第一个答案不正确，它不起作用。 而是这样做：

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

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