继承CSS属性？

如何解决继承CSS属性？

| 抱歉，但是无论我多久阅读一次，我都不会讨厌它。我已经宣布

.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规则中的冲突。熟悉特异性后，特异性非常强大。在您刚刚描述的情况下，它确实有助于减少代码。

如何解决继承CSS属性？

解决方法

相关推荐