CSS获取父元素属性

CSS get parent elements attribute

本文关键字：属性 元素 获取 CSS      更新时间：2023-09-26

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

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

我有一个自定义颜色属性的元素。我想让头部有它作为背景色，链接作为颜色(颜色是随机生成或用户定义的)。有没有一种方法可以单独使用CSS来实现?(我知道jQuery会做到这一点没有问题，但我想保持东西尽可能漂亮，而不是使用Javascript单独的样式)

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

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

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

遗憾的是，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);        
});

例子小提琴

我认为你可以这样做:

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";
}
相关文章：