CSS属性的继承？

对不起，但不管我多久阅读一次，我都不会理睬它。CSS属性的继承？

我宣布

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

，现在我要声明centered_submit_button从submit_button继承，并增加了margin-left:auto; margin-right:auto;

请怜惜我...

来源

2011-05-28 Mawg

不幸的是，香草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，它们提供类似继承的构造以及许多其他很好的功能，可以提高你的网络生活质量开发商。

在这种情况下，少即是具有讽刺意味的更详细的，但可以说更具表现力：

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

.submit_button 
{ 
    .button; 
} 

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

另一个类似的工具是Stylus，其中承担了大部分的东西更不是，但也有关于使用标点符号很无所谓的态度在你的语法：

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

.submit_button 
    button 

.centered_submit_button 
    button 
    margin-left auto 
    margin-right auto

均不及手写笔有客户端的JavaScript实现，所以你必须直接托管.less或.stylus文件或编译t时的选项在服务器上摆放并托管所产生的CSS。

来源

2011-05-28 04:01:14 namuol

你错过了。在center_submit_button的第一个实例中。 – 2011-05-28 04:02:51

谢谢，它已被修复 – namuol 2011-05-28 04:09:52

它不工作得很像。在这个意义上，在CSS中没有继承的概念。但是，你可以做什么，是定义.submit_button和.centered_submit_button的共同属性，然后重新定义你想要做不同的事情，因为只有.centered_submit_button，像这样：

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

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

来源

2011-05-28 04:01:33

不幸的是CSS继承不起作用那办法。如果你想要做一些你想要的事情，你需要使用类似Less的东西。否则，您必须定义每个元素的属性或将多个类添加到元素。

来源

2011-05-28 04:03:17 scurker

+1，因为Less太棒了，而且我只是*就*编辑我的回应来提及它。 – namuol 2011-05-28 04:04:03

我不知道这些人说你在CSS中不能做继承是怎么回事。当然，CSS不称之为继承，但你仍然可以达到同样的效果。这一切都取决于一个名为CSS specificity的主题，该主题表示当规则冲突时，将应用最具体的规则。

在你的情况，你可以做这样的事情：

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

.submit_button.centered 
{ 
    margin: 0 auto; 
}

给出的第一条规则定义与submit_button类的所有元素的样式。第二条规则适用于所有具有submit_button类和centered类的元素。在一个元素上有多个类是完全有效的HTML和CSS（只需用HTML class属性中的空格分隔类名）。现在，第二条规则比第一条更具体，因为它符合第一条规则所做的一切（submit_button类）以及其他更多内容（centered类）。因此，centered类的margin规则中的冲突通过在0之上取0 auto来解决。

一旦您熟悉它的工作原理，特异性就非常强大。它确实有助于减少您刚刚描述的情况下的代码。

来源

2011-05-28 04:10:30

特异性对于了解有一定的重要性，但我认为它与继承非常相似。在你的例子中，你必须为你的元素应用2个类，并且有可能.centered也有其他规则。从概念上讲，我认为这不像人们发布的其他方法那样更像继承，但无论如何它很有意思。 – 2011-05-28 06:34:12

CSS属性的继承？

回答

相关问题