html - 循环遍历 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

在您的特定情况下，您可以使用 css 属性选择器 ^=，这是一种开始于选择器:

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

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