我想有具有多个子属性，但主要属性的索引页面上滚动横幅：继CSS多个ID /类规则

height: 75vh;

在所有的页面我会喜欢同样的旗帜都适用于它的其他规则，但只能有不同的高度：

height: 30vh;

这将使这两个横幅遵守所有相同的规则保持移动响应 - 即他们都还是来了在id =“横幅”下。

一个简单的办法解决，这将是一个标签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”！我似乎无法让它工作！有没有人有我如何解决这个问题的想法？

我怀疑有一个简单的修复方法，我只是看不到从树上的木材！

谢谢大家。

来源

2017-07-09 INSERT_BRAIN_HERE

只需添加''这样第1页 –

使用多个类的样式表链接后 - '类=第一个为“bannerX height1”。对于第二个使用'class =“bannerX height2”'。高度只能保持高度的值。无需在bannerX中使用高度。 –

每个人的评论都有效。我必须说，尽管李斯特先生 - 那是最简单的方法！我刚刚将标准高度插入模板文件中的可编辑区域，然后仅将其更改为索引页。排序。请将您的评论写成适当的评论，以便我可以评价它的答案。再次感谢你。 –

使用这样的多个类 - class="bannerX height1"为第一个。第二个使用class="bannerX height2"。高度只能保持高度的值。无需使用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>

来源

2017-07-09 12:05:06

继CSS多个ID /类规则

回答

CSS

HTML

相关问题