css - 针对具有两个不同父类的同一个 child

Question

这几天我开始使用 SASS 编写我的 css 文件。 我有两个不同的 parent 类(class)，但这两个 parent 有相同的 child 类(class)。所以我想用这段 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 是你的 ID parent ，而他们有相同的 child .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 — Block Element Modifier Methodology

#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;
    }
}