Question

假设在CSS中有两个类 - fatherDiv和childDiv -

.fatherDiv {
    /*
        With background and no special font color 
        */
    background-color: #b0c4de;
    width: 350px;
    height: 280px;
}

.childDiv {

    font-family: Arial,Helvetica,sans-serif;
    font-size: 50px;
}

希望.childDiv继承所有.fatherDiv样式并添加更多内容。

常见的方法是 -

<div class="fatherDiv childDiv">I'm the Child</div>

但我的问题是 -

是否可以选择将类样式继承到CSS文件中的另一个类？

我试过了 -

style.css -

.fatherDiv .childDiv {
    /*
          Inherit from .fatherDiv ...  
            */
    font-family: Arial,Helvetica,sans-serif;
    font-size: 50px;
}

index.html -

<div class="childDiv">I'm the Child</div>

Here is its jsFiddle

但它放弃了干预。

Answer 1

你可以这样做：

.fatherDiv, .childDiv {
    background-color: #b0c4de;
    width: 350px;
    height: 280px;
}

.childDiv
{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 50px;
}

http://jsfiddle.net/NicoO/9rhDd/6/

您也可以不调用这些元素child和father。他们是兄弟姐妹。

Answer 2

检查一下 - http://jsfiddle.net/9rhDd/7/

 .fatherDiv,.childDiv {
    /*
        With background and no special font color 
        */
    background-color:#b0c4de;
    width:350px;
    height:280px;
    /*font-size:50px;*/
}

Answer 3

类似的东西：

.fatherDiv {
    background-color: #b0c4de;
    width: 350px;
    height: 280px;
}

.childDiv {
    background-color:inherit;
    width:100%;
    height:100%;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 50px;
}

只要你的HTML像：

，

就可以在理论上运作

<div class="fatherDiv">
   <div class="childDiv"></div>
</div>

虽然inherit对所有CSS值都不起作用，所以你必须检查它。

它不会自动继承这些值，你需要像Sass这样的预处理器才能做到这一点。

在CSS中继承类

3 个答案: