问题描述
|
抱歉,但是无论我多久阅读一次,我都不会讨厌它。
我已经宣布
.submit_button
{
font: 12px Arial;
margin:0px;
padding:2px;
}
现在我要声明继承自submit_button
并添加margin-left:auto; margin-right:auto;
的centered_submit_button
请可怜我...
解决方法
不幸的是,原始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。
, 它不是那样工作的。在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;
}
, 不幸的是,CSS继承不能那样工作。如果您想执行类似您要求的操作,则需要使用类似Less的操作。否则,您将必须为每个元素定义属性或向一个元素添加多个类。
, 我不知道这些在CSS中说您“无法继承”的人怎么了。当然,CSS不会将其称为继承,但是您仍然可以实现相同的效果。所有这些都取决于一个称为CSS特殊性的主题,该主题表示当规则冲突时,将应用最具体的规则。
在您的情况下,您可以执行以下操作:
.submit_button
{
font: 12px Arial;
margin:0px;
padding:2px;
}
.submit_button.centered
{
margin: 0 auto;
}
给出的第一个规则定义了所有类别为“ѭ2”的元素的样式。第二条规则适用于所有类别为“ 2”和类别为“ 16”的元素。在单个元素上具有多个类是完全有效的HTML和CSS(只需用HTMLclass
属性中的空格分隔类名)。现在,第二个规则比第一个更具体,因为它匹配第一个规则所做的所有事情(submit_button
类)加上更多内容(centered
类)。结果,通过使0 auto
胜过0
来解决for16ѭ类的margin
规则中的冲突。
熟悉特异性后,特异性非常强大。在您刚刚描述的情况下,它确实有助于减少代码。