有没有任何方法可以在一行中使用另一个css的所有css属性和值

Question

看看这些代码：

.hero-text-box a {
color: #fff;
font-size: 1.6rem;
text-decoration: none;
text-transform: uppercase;
padding: 1.8rem 10rem;
background: #eb7d4d;
border-radius: 0.5rem;
border-bottom: 0.5rem solid #c86a43;
}

我想将所有属性和值复制到另一个css选择器。请参阅下面的代码：

.row-3 input {
.hero-text-box a 
}

这可能吗？还是其他方法？

Answer 1

不，您不能这样做。

然而，您可以对单个声明块使用多个选择器(用逗号分隔(。这应该会达到您想要的结果：

.hero-text-box a, .row-3 input {
color: #fff;
font-size: 1.6rem;
text-decoration: none;
text-transform: uppercase;
padding: 1.8rem 10rem;
background: #eb7d4d;
border-radius: 0.5rem;
border-bottom: 0.5rem solid #c86a43;
}

有关逗号的详细信息：https://www.lifewire.com/comma-in-css-selectors-3467052

其他答案是参考SASS，它是CSS的扩展，有一些额外的方法来实现相同的结果。

Answer 2

使用SASS，您可以使用@extend.hero文本框作为

Answer 3

您可以在SCSS中使用@extend。但不能扩展嵌套选择器。因此，不能扩展为.hero-text-box a。你可以这样扩展：

输入：

.hero-text-box {
color: #fff;
font-size: 1.6rem;
text-decoration: none;
}

.row-3 input {
@extend .hero-text-box;
color:red;
}

输出：

.hero-text-box, .row-3 input {
color: #fff;
font-size: 1.6rem;
text-decoration: none;
}
.row-3 input {
color: red;
}

或者您可以使用@mixin

输入

@mixin myProperties {
color: #fff;
font-size: 1.6rem;
text-decoration: none;
}
.hero-text-box a {
@include myProperties;
}
.row-3 input {
@include myProperties;
color: red;
}

输出：

.hero-text-box a {
color: #fff;
font-size: 1.6rem;
text-decoration: none;
}
.row-3 input {
color: #fff;
font-size: 1.6rem;
text-decoration: none;
color: red;
}