Question

我有一个问题，我无法找到答案谷歌搜索。我想知道是否有一种方法可以从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>为例。我想知道我是否在body.color类的CSS定义中使用的mySpecificP伪代码的解决方案。

Answer 1

您可以使用currentColor完成此操作：

body { 
  color: black;
}

p { 
  color: green;
}

.mySpecificP { 
  color: currentColor;
}

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

Working example

所有相对现代的浏览器are supported

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

1 个答案: