css - CSS属性中的继承？

Question

抱歉，无论我读多少次，我就是不理解它。

我已经声明了

.submit_button  
{  
  font: 12px Arial;  
  margin:0px;  
  padding:2px;  
}

现在我想声明 centered_submit_button 继承自 submit_button 并添加 margin-left:auto; margin-right:auto;

请可怜我...

Answer 1

不幸的是，vanilla CSS 没有任何继承的概念，但是你可以用这个实现你需要的:

.submit_button, .centered_submit_button
{
    font: 12px Arial;  
    margin: 0px;  
    padding: 2px; 
}

.centered_submit_button
{
    margin-left: auto;
    margin-right: auto;
}

这可能就是您所需要的，但是作为scurker提到，有 CSS 增强工具，如 LESS提供类似继承的构造以及许多其他可以提高您作为 Web 开发人员的生活质量的优秀功能。

在这种情况下，LESS 具有讽刺意味的是更冗长，但可以说更具表现力:

.button ()
{
    font: 12px Arial;
    margin: 0px;  
    padding: 2px; 
}

.submit_button
{
    .button;
}

.centered_submit_button
{
    .button;
    margin-left: auto;
    margin-right: auto;
}

另一个类似的工具是 Stylus ，它完成了 LESS 所做的大部分工作，但对在语法中使用标点符号也持非常漠不关心的态度:

button()
    font 12px Arial
    margin 0px
    padding 2px

.submit_button
    button

.centered_submit_button
    button
    margin-left auto
    margin-right auto

LESS 和 Stylus 都有客户端 JavaScript 实现，因此您可以选择直接托管 .less 或 .stylus 文件，或者在服务器上编译它们并托管生成的 CSS。