CSS继承 [英] CSS Inheritance

问题描述

说我有一个像这样的 div ，它将拥有与背景图片或类似的所有相同的属性：

  div.someBaseDiv 
 {
 margin-top：3px; 
 margin-left：auto; 
 margin-right：auto; 
 margin-bottom：0px; 
} 
  

我想继承它：

  div.someBaseDiv someInheritedDiv 
 {
 background-image：url（images / worldsource / customBackground.gif）; 
 background-repeat：no-repeat; 
 width：950px; 
 height：572px; 
} 
  

当然，我确定这写错了，

解决方案

最简单的方法是：是将您的someInheritedDiv元素添加到像这样的第一个规则。

  div.someBaseDiv，
 #someInheritedDiv 
 {
 margin-top：3px; 
 margin-left：auto; 
 margin-right：auto; 
 margin-bottom：0px; 
} 
  

这将告诉您的#someInheritedDiv应用与div.someBaseDiv相同的样式。然后您 扩展这套样式，更具体到您的#someInheritedDiv：

  #someInheritedDiv 
 {
 background-image：url（images / worldsource / customBackground.gif）; 
 background-repeat：no-repeat; 
 width：950px; 
 height：572px; 
} 
  

这是CSS的特异性 / p>

Say I have a div like this that is going to have all of the same properties with a background image or something like that:

div.someBaseDiv
{
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

And I wanted to inherit from it like this:

div.someBaseDiv someInheritedDiv
{
    background-image:url("images/worldsource/customBackground.gif");
    background-repeat:no-repeat;
    width:950px;
    height:572px;
}

Of course I'm pretty sure this is written wrong, and I'm not afraid to ask for help, so can someone tell me how to make this work and include the HTML markup?

解决方案

The easiest is to add your someInheritedDiv element to the first rule like this.

div.someBaseDiv,
#someInheritedDiv
{
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

This will tell your #someInheritedDiv to apply the same styles as div.someBaseDiv has. Then you extend this set of styles with more specific to your #someInheritedDiv:

#someInheritedDiv
{
    background-image:url("images/worldsource/customBackground.gif");
    background-repeat:no-repeat;
    width:950px;
    height:572px;
}

This is how specificity in CSS works.

这篇关于CSS继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！