从 CSS3 代码本身访问 CSS3 属性值答案

【问题标题】：Access a CSS3 property-value from CSS3 code itself从 CSS3 代码本身访问 CSS3 属性值
【发布时间】：2016-02-14 05:46:01
【问题描述】：

我有一个问题在谷歌搜索中找不到答案。我想知道是否有办法从 CSS3 代码本身访问元素属性（为简单起见，CSS）。我不是在寻找其他使用 JavaScript 或 CSS 类和 id 的解决方案，因为我很清楚如何以这种方式解决问题。我的问题很具体。

例如，假设我有以下 CSS 代码：

body { color: black;}
p { color: green;}

并假设我想通过引用将特定标签/类/id 的color CSS 属性值设置为与<body> 相同，而不仅仅是放置一个简单的color:black 规范。换句话说，我想要这样的东西：

.mySpecificP { color: body.color;}

HTML 代码应该是这样的：

<html>
    <head>
        <style>
            body { color: black;}
            p { color: green;}
            .mySpecificP { color: body.color;}
        </style>
    </head>

    <body>
        <p>This is a green paragraph.</p>
        <p class="mySpecificP">This is a black paragraph.</p>
    </body>
</html>

这里我使用<p> 作为示例。我想知道我在mySpecificP 类的CSS 定义中使用的body.color 伪代码是否有解决方案。

【问题讨论】：

不，你不能用 vanilla CSS 做到这一点。您必须使用像 Sass 这样的 CSS 预处理器来执行此操作，然后在浏览器解析之前将其编译成实际的 CSS。
它很痛.. :p 没有办法使用inherit 或类似的东西来实现这一点？也许是color:root？
孩子可以从父母那里继承一些属性。

标签： css properties attributes

【解决方案1】：

您可以使用currentColor 实现此目的，如下所示：

body { 
  color: black;
}

p { 
  color: green;
}

.mySpecificP { 
  color: currentColor;
}

基本上currentColor 包含元素继承的颜色值（在本例中来自body），也可以用于其他属性，如background-color、border-color 等。

Working example

所有比较现代的浏览器are supported

【讨论】：