Question

我正在尝试从另一个类获取属性。

这是我的简单测试HTML：

<div class='test bgcolor'> An arrow! </div>

这是我的CSS：

.test{
    position: relative;
    color: red;
    width: 50%;
    margin: 30px;
    padding: 20px;
}
.bgcolor{
    background-color: yellow;
}
.test:after{
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-right-color: yellow;
    border-width: 10px;
    margin-top: -10px;
}

类bgcolor设置背景颜色，在典型情况下可以从黄色更改为另一种颜色。

test:after用于小箭头和箭头的颜色应与由bgcolor类中的background-color属性确定的框相同。

现在，我遇到了一个问题，如何在'test：after'中设置border-right-color，并使用bgcolor中的background-color值。

如果可以解决这个问题，我唯一需要改变（箭头+框）颜色的方法就是改变bgcolor中的颜色。

请给我一个建议。

谢谢。

Answer 1

这不起作用吗？

 }
 .bgcolor{
     background-color: yellow;
     border-color: yellow;
     border-width: 0;
 }
 .test:after{
     right: 100%;
     top: 50%;
     border: solid transparent;
     content: " ";
     position: absolute;
     border-width: 10px;
     margin-top: -10px;
 }

Answer 2

您正在寻找的是CSS变量。他们会做出这样的事情：

--testBGColor: yellow;

.bgcolor {
    background-color:var(--testBGColor);
}

.test:after {
    border-right-color:var(--testBGColor);
    ...
}

这种方法的问题是主要浏览器还不支持CSS变量：Can I use CSS variables?

所以你必须使用像LESS或SASS这样的CSS预处理器。

LESS的解决方案：

@testBGColor: yellow;

.bgcolor {
    background-color:@testBGColor;
}

.test:after {
    border-right-color:@testBGColor;
    ...
}

但请记住，LESS是一个预处理器，意味着上述代码将在运行时或编码后编译为纯CSS。它不是CSS的一部分。

Answer 3

您可以使用Sass之类的预处理程序或Less声明变量并在类中使用它来执行此操作。

$yellow: #FFC900;

.bgColor { background-color: $yellow; }

.test:after { 
    border-right-color: $yellow;
    ...
}

这是一个Sass的例子。

Answer 4

添加到div，还有一个类似＆＃34; .theme-1＆＃34;第一种颜色并自定义

.bgcolor.theme-1{
    background-color: red;
    border-color: red;
}

.bgcolor.theme-1:after{
    border-right-color: red;
}

以及＆＃34; .theme-2＆＃34;，＆＃34; .theme-3＆＃34;等

如何从CSS中的其他类获取属性？

4 个答案: