循环通过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; ... }