循環通過CSS可能嗎？

Question

我已經使用了相同的CSS代碼加載次數，但只是給它不同的名稱。所以基本上我一遍又一遍地調用同一個CSS，但命名不同。我覺得我應該循環通過它。有任何想法嗎？

#block1{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;} 
#block1.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;} 

#block2{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;} 
#block2.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;} 

#block3{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;} 
#block3.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;} 

#block4{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;} 
#block4.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;} 

#block5{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;} 
#block5.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;} 

然後在HTML我這樣做：

 <button onclick="document.getElementById('block1').setAttribute('class', '');"> 
     <b><abbr title="Reports showing all cases with various display options."><span style='color:black;'>Current Status Reports</b></span></button><br> 
      <div id="block1" class="a"> 
       <a href="javascript:GenerateReport('https://www.kerrys.com/oecgi.exe/dm_currentstatus_crprocess');">Current Status Report With Legal Process</a><br> 
       <a href="javascript:GenerateReport('https://www.kerrys.com/oecgi.exe/dm_currentstatus');">Current Status Report</a><br> 
       <a href="javascript:GenerateReport('https://www.kerrys.com/oecgi.exe/dm_currentstatus_last_response');">Current Status Report With Last Response</a><br> 
       <a href="javascript:GenerateReport('https://www.kerrys.com/oecgi.exe/dm_currentstatus_last_receipt');">Current Status Report With Last Receipt</a><br> 
       <a href="javascript:GenerateReport('https://www.kerrys.com/oecgi.exe/dm_currentstatus_last_response_plantiff');">Current Status Report With Last Response and Plaintiff</a><br> 
       <a href="javascript:GenerateReport('https://www.skerrys.com/oecgi.exe/dm_currentstatus_trxdte');">Current Status Report by Date Transferred</a><br> 
       <button onclick="document.getElementById('block1').setAttribute('class', 'a');"><b>Hide -</b></button> 
      </div> 


     <button onclick="document.getElementById('block2').setAttribute('class', '');"> <b><abbr title="Reports showing current new business & demand letters sent to debtors.">New Business & Letters Before Action</b></button><br> 
      <div id="block2" class="a"> 
       <a href="javascript:GenerateReport('https://www.kerrys.com/oecgi.exe/DM_NewBusiness');">New Business This Period</a><br> 
       <a href="javascript:GenerateReport('https://www.kerrys.com/oecgi.exe/DM_LBASent');">Letter Before Action Sent</a><br> 
       <a href="javascript:GenerateReport('https://www.kerrys.com/oecgi.exe/DM_CasesAwaitingInstructions_Issue');">Cases Awaiting Instructions to Issue</a><br> 
       <button onclick="document.getElementById('block2').setAttribute('class', 'a');"><b>Hide -</b></button> 
      </div> 

Answer 1

是..你的情況，這幾乎是微不足道的。

#block1, #block2, (etc) { 
    //Your style here 
} 

看着你現有的CSS，我不確定它是否在做你認爲的事。 #block1.a未在html中的'a'元素上設置樣式，它將它設置在相同的元素上，.a將它與類相關聯，該類由您的class="a"屬性定義。

雖然你好得多設置你的風格一類，和使用，如

div.a { //style for `div class="a"` elements 
} 
div.a a { // style for 'a' elements within those divs 
} 

Answer 2

在特定情況下，你可以使用CSS屬性選擇^=，即排序的開始與選擇：

[id^="block"] { 
    /* your style */ 
} 

[id^="block"].a { 
    /* your style */ 
} 

Answer 3

對於當前的代碼，你可以把它改成：

#block1, #block2, #block3, #block4, #block5 { 
    display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px; 
} 

#block1.a, #block2.a, #block3.a, #block4.a, #block5.a { 
    display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px; 
} 

但它可能是更好的只是有一個block類：

.block { display:block; ... } 
.block.a { display:none; ... }