针对两个不同父母班级的同一孩子

Question

从几天开始，我使用sass来编写我的CSS文件。我有两个不同的父母课程，但是这两个父母有相同的孩子课。因此，我想构建此CSS代码的SCSS树：

#header {
    position: relative;
    width: 100%;
}
#header-g {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    width: 100%;
}
#header .l-header-top, #header-g .l-header-top {
    height: 55px;
    line-height: 50px;
    border-top: 5px solid #474747;
    background-color: #f0f1f3;
    font-size: 16px;
}

我尝试了这个，但我想我忘记了一些东西：

    #header {
    position: relative;
    width: 100%;
    &#header-g {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 300;
        width: 100%;
        .l-header-top {
            height: 55px;
            line-height: 50px;
            border-top: 5px solid #474747;
            background-color: #f0f1f3;
            font-size: 16px;
        }
    }
}

谢谢

Answer 1

在您的代码中，如果您使用的是&，则意味着它们在同一元素中，并且在单个元素中只有1个ID。您应该在这种情况下使用class。

#header {
    position: relative;
    width: 100%;
    &#header-g {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 300;
        width: 100%;

，但应该是这样的。#header和#header-gestion是您的身份证父母，而他们的孩子与.l-header-top相同的孩子。

#header {
    position: relative;
    width: 100%;
    .l-header-top {
       height: 55px;
       line-height: 50px;
       border-top: 5px solid #474747;
       background-color: #f0f1f3;
       font-size: 16px;
    }
}
#header-g {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    width: 100%;
    .l-header-top {
       height: 55px;
       line-height: 50px;
       border-top: 5px solid #474747;
       background-color: #f0f1f3;
       font-size: 16px;
    }
}

或您以这种方式使用&，该方式基于类命名约定的BEM方法。您可以检查此链接：BEM - 块元素修改器方法

#header {
    position: relative;
    width: 100%;
    &-g {
       position: fixed;
       top: 0;
       left: 0;
       z-index: 300;
       width: 100%;
    }
}

#header,
#header-g {
    .l-header-top {
       height: 55px;
       line-height: 50px;
       border-top: 5px solid #474747;
       background-color: #f0f1f3;
       font-size: 16px;
    }
}