Question

所以我遇到了这个问题。我们说我有以下标记：

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

所以我有一个带有自定义颜色属性的元素。我想让标题将其作为背景颜色，并将链接作为颜色（颜色是随机生成的或用户定义的）。有没有办法做到这一点只有CSS？（我知道jQuery可以毫无问题地执行此操作，但我希望尽可能地使用Javascript进行设置，而不是单独使用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);        
});

Example fiddle

Answer 3

我认为你可以这样做：

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

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

<强> 更新

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

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

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

CSS获取父元素属性

3 个答案: