我想有具有多個子屬性，但主要屬性的索引頁面上滾動橫幅：繼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

相關問題