css - 遵循 CSS 中的多个 ID/Class 规则

Question

我想在索引页上有一个滚动横幅，它有多个子属性，但主要属性是:

height: 75vh; 

在所有后续页面上，我希望同一个横幅具有适用于它的所有其他规则，但只有高度不同:

height: 30vh; 

这将允许两个横幅遵循所有相同的规则以保持移动响应 - 即它们仍然属于 id="banner"。

解决这个问题的一个简单方法是标记一个 id="bannerX"和一个 id="bannerY"，然后将所有后续 CSS 复制到相应的 X 或 Y 下。例如:

#bannerX {
    background-color: #444;
    color: #fff;
    min-height: 40em;
    height: 75vh;
    position: relative;
}

    #bannerX input, #banner select, #banner textarea {
        color: #fff;
    }

    #bannerX a {
        color: #fff;
    }

    #bannerX strong, #banner b {
        color: #fff;
    }

   and so on...

对比

#bannerY {
    background-color: #444;
    color: #fff;
    min-height: 40em;
    height: 30vh;
    position: relative;
}

    #bannerY input, #banner select, #banner textarea {
        color: #fff;
    }

    #bannerY a {
        color: #fff;
    }

    #bannerY strong, #banner b {
        color: #fff;
    }

   and so forth...

但这只会导致大量完全相同的 CSS 重复，只是原始 ID 改变了其中的一条规则。这会起作用，但似乎是一种非常困惑的解决方法。我确信必须有更好的方法来解决这个问题，但我似乎无法让它发挥作用。我尝试在各自的部分中添加 class="banner-thick"或 class="banner-thin"但这似乎也不起作用，因为这两个横幅都不遵循原始 id="banner"规则因为它们现在是 id="bannerX"或 id="bannerY"!我似乎无法让它工作!有谁知道我该如何解决这个问题？

我怀疑有一个简单的修复方法，我只是看不到树木中的木头!

谢谢大家。

Answer 1

像这样使用多个类 - class="bannerX height1" 第一个。对于第二个，使用 class="bannerX height2"。其中 height 仅包含高度值。无需在 bannerX 中使用高度。

CSS

.bannerX {
    background-color: #444;
    color: #fff;
    min-height: 40em;
    /*height: 75vh;*/ as we define different heights in height1 & height1 class
    position: relative;
}

.height1 {
    height: 75vh;
}

.height2 {
    height: 75vh;
}

HTML

<div class="bannerX height1">
</div>


<div class="bannerX height2">
</div>