标签如何相互继承？

Question

我对p：

有以下定义

.contact p {
    margin: 5px 0 0 10px;
    font-size:0.875em;
    color: gray;  
}

我希望下面的电子邮件链接继承p中的所有内容：

.contact a:link {
    text-decoration: none;
}

我该怎么做？

Answer 1

.contact p, .contact a {
    /* your styles */
}

Answer 2

要让.contact a具有与p相同的样式，只需列出您的选择器，用逗号分隔，如下所示：

.contact p, .contact a {
    margin: 5px 0 0 10px;
    font-size:0.875em;
    color: gray;  
}

Answer 3

CSS中没有以这种方式可用的继承。您必须修改.contact p选择器，以便它也选择a。类似的东西：

.contact p, .contact a { /* Your styling */ }

另一种选择是使用CSS预处理器，如SASS或LESS，它使用一些方便的功能扩展CSS，如变量，混合，嵌套规则等。在L​​ESS使用mixins和变量，你可以完成这样的继承：

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}