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 */
}

Answer 2

是的..在你的情况下，这几乎是微不足道的。

#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 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; ... }

循环通过CSS可能吗？

3 个答案: