CSS繼承風格

我爲許多看起來相似的div設置了樣式。唯一的區別是每個div都有不同的填充和邊距設置。事情是這樣的：CSS繼承風格

<div class="mainStyle" id="cc">CC</div> 
<div class="mainStyle" id="bb">BB</div> 
<div class="mainStyle" id="aa">AA/div>

而且有：

.mainStyle { 
    float: right; 
    width: 60px; 
    text-align : center; 
    font: 95% Arial; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    background : #69abd0; 
}

併爲每個ID只有：

#aa { 
    margin: 0px 2px 0px 2px; 
    padding: 2px 0 5px 0; 
} 

#bb { 
    margin: 10px 2px 10px 2px; 
    padding: 2px 0 5px 0; 
} 

#cc{ 
    margin: 10px 2px 10px 2px; 
    padding: 20px 0 50px 0; 
}

我知道這是錯誤的語法，但我不知道是怎麼回事問這個問題... 我不想爲每個元素ID有一個很長的樣式定義，因爲它們除了填充和邊距外都是％90。我想以某種方式結合課堂和元素的風格。

我該怎麼做？

來源

2011-09-22 1qazxsw2

，我不認爲你正在嘗試做的是可能的CSS ..但是你可以像結合在一起的樣式使用'#AA，#bb {填充：2px的0 5px的0; }'等 –

你確定這是錯誤的語法嗎？它看起來對我是正確的。你試過了嗎？ – BoltClock

對於作者誰沒有接受過一個單一的答案的問題，這裏肯定有很多答案。在這方面大部分是可疑的答案。難怪。 – BoltClock

你寫什麼將完成你「問。您的代碼中存在語法錯誤，最後一個AA元素的標記缺少左邊的<。另外，請記住，順序對於CSS樣式很重要。。id的樣式需要在.mainStyle和任何其他可能會覆蓋您的邊距或填充的樣式之後。您可以通過在樣式中使用！important修飾符來克服這種必要性。

來源

2011-09-22 06:36:22 garromark

我不明白你的問題。你可以像你一樣完美地將一個ID和一個班級結合起來。你在尋找一種重用這些ID的方法嗎？您可以將它們轉換爲類，並在html中使用它：

<div class="mainStyle aa">AA/div>

您的代碼確實沒什麼問題。

來源

2011-09-22 06:31:54 JNDPNT

該語法沒有任何問題，但可以減少重複性。一個ID比類更具體的，所以你可以覆蓋從類樣式設置：

.mainStyle { 
    float: right; 
    width: 60px; 
    text-align : center; 
    font: 95% Arial; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    background : #69abd0; 
    margin: 10px 2px; 
    padding: 2px 0 5px 0; 
} 

#aa { 
    margin: 0 2px; 
} 

#bb { 
} 

#cc{ 
    padding: 20px 0 50px 0; 
}

如果你不想要的元素的類，你可以使用,操作人員使用的多個選擇一種風格。樣式規則是在它們的排列順序應用，因此具有相同特異性後的規則將覆蓋以前的規則：

#aa,#bb,#cc { 
    float: right; 
    width: 60px; 
    text-align : center; 
    font: 95% Arial; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    background : #69abd0; 
    margin: 10px 2px; 
    padding: 2px 0 5px 0; 
} 

#aa { 
    margin: 0 2px; 
} 

#bb { 
} 

#cc{ 
    padding: 20px 0 50px 0; 
}

（空#bb規則僅包含表明，我沒有忘記它作爲它是空的它當然是不需要的。）

來源

2011-09-22 06:34:11 Guffa

我不知道我完全理解你的問題。您「可以」使用該類在CSS中定位html標識，例如.mainstyle#aa，但這完全是矯枉過正。真的是沒有太多的簡化：

.mainStyle { 
    float: right; 
    width: 60px; 
    margin: 10px 2px 10px 2px; 
    padding: 2px 0 5px 0; 
    text-align : center; 
    font: 95% Arial; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    background : #69abd0; }  
#aa { margin: 0px 2px 0px 2px; } 
#cc { padding: 20px 0 50px 0; }

這也是更好的做法，做這樣的事情：

<div class="main"> 
    <div id="cc">CC</div> 
    <div id="bb">BB</div> 
    <div id="aa">AA</div> 
</div>

和

/* Use the child selector... */ 
.main > div { /* apply .mainStyle here */ } 
#aa...

來源

2011-09-22 06:34:36 Wex

像這樣..這是級聯樣式表的級聯部分不會做同樣的事情兩次，只是寫它的腳，如果需要的話，可以稍後在線上騎它。之後設置的CSS設置將盡早搭配一套。你也應該研究關於CSS的特殊性。

CSS

.mainStyle { 
    float: right; 
    width: 60px; 
    text-align : center; 
    font: 95% Arial; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    background : #69abd0; 
    margin: 10px 2px 10px 2px; 
    padding: 2px 0 5px 0; 
} 

#aa { 
    margin: 0px 2px 0px 2px; 
} 

#cc{ 
    padding: 20px 0 50px 0; 
}

來源

2011-09-22 06:37:11

回答

相關問題