html - 如何使用一个选择器定位这些子 div？

Question

我正在研究具有多个级别的 CSS 菜单。在这个级别上，我有一个带有每个主题 ID 的 div(条形图、饼图、线形等)。有没有一种方法可以在一个地方设置所有这些 div 的样式，而不必为每个单独的 ID 命名并放置相同的样式？ 我认为我需要某种包装器，但我不确定将其放置在何处以及如何在我的样式表中正确调用它。

我的代码:

<div class="menu">
    <input id="s" name="UItab" type="radio" />
    <label for="s">
        <a href=""><span>Styles</span></a>
    </label>

    <div>
        <div onmouseout=
        "((collapseFlag == true) ? collapse('&lt;?php echo $secondMenu?&gt;'): expand());"
        onmouseover="expand('sub-menu');">
            <div id="sub-menu">
                <ul class="sub-menu">
                    <li>
                        <a href="">Item1</a>
                    </li>

                    <li>
                        <a href="">Item2</a>
                    </li>
                </ul>
            </div>
        </div>

        <div id="sAdminEd" onmouseout=
        "((collapseFlag == true) ? collapse('&lt;?php echo $secondMenu?&gt;'): expand());"
        onmouseover="expand('&lt;?php echo $secondMenu?&gt;');">
            <div id="second-sub-menu">
                <ul class="second-sub-menu">
                    <li>
                        <a href="">Item1</a>
                    </li>

                    <li>
                        <a href="">Item2</a>
                    </li>
                </ul>
            </div>
        </div>

        <div id="Bar">
            <ul class="second-sub-menu">
                <li>
                    <a href="">Item1</a>
                </li>

                <li>
                    <a href="">Item2</a>
                </li>
            </ul>
        </div>

        <div id="Pies">
            <ul class="second-sub-menu">
                <li>
                    <a href="">Item1</a>
                </li>

                <li>
                    <a href="">Item2</a>
                </li>
            </ul>
        </div>

        <div id="Line">
            <ul class="second-sub-menu">
                <li>
                    <a href="">Item1</a>
                </li>

                <li>
                    <a href="">Item2</a>
                </li>
            </ul>
        </div>

        <div id="Table">
            <ul class="second-sub-menu">
                <li>
                    <a href="">Item1</a>
                </li>

                <li>
                    <a href="">Item2</a>
                </li>
            </ul>
        </div>

        <div id="Gauge">
            <ul class="second-sub-menu">
                <li>
                    <a href="">Item1</a>
                </li>

                <li>
                    <a href="">Item2</a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS:

#Bar {
    display:none;
    border: 1px solid #808080;
    right:0;
    top:57px;
    background-image: url('../images/background4.png');
    text-align: center;
    min-width: 100%;
    margin: 0 auto; 
    height: 20%;
}

#Pies {
    display:none;
    border: 1px solid #808080;
    right:0;
    top:57px;
    background-image: url('../images/background4.png');
    text-align: center;
    min-width: 100%;
    margin: 0 auto;
    height: 20%;
}

#Line {
    display:none;
    border: 1px solid #808080;
    right:0;
    top:57px;
    background-image: url('../images/background4.png');
    text-align: center;
    min-width: 100%;
    margin: 0 auto; 
    height: 20%;
}


#Table {
    display:none;
    border: 1px solid #808080;
    right:0;
    top:57px;
    background-image: url('../images/background4.png');
    text-align: center;
    min-width: 100%;
    margin: 0 auto; 
    height: 20%;
}


#Gauge {
    display:none;
    border: 1px solid #808080;
    right:0;
    top:57px;
    background-image: url('../images/background4.png');
    text-align: center;
    min-width: 100%;
    margin: 0 auto; 
    height: 20%;
}

Answer 1

Chris 的评论就是这样做的方法。添加CSS class到相关元素并以此为目标。这正是 CSS 中类的用途——以一组相似的元素为目标。

.chartType {
    display:none;
    border: 1px solid #808080;
    right:0;
    top:57px;
    background-image: url('../images/background4.png');
    text-align: center;
    min-width: 100%;
    margin: 0 auto; 
    height: 20%;
}

<div class="menu">
<input type="radio" name="UItab" id="s" >
<label for="s"><a href=""><span>Styles</span></a></label>
    <div>
        <div onmouseover="expand('sub-menu');" onmouseout="((collapseFlag == true) ? collapse('<?php echo $secondMenu?>'): expand());">
            <div id="sub-menu">
                <ul class="sub-menu">
                    <li ><a href="">Item1</a></li>
                    <li ><a href="">Item2</a></li>          
                </ul>
            </div>
        </div>
        <div id="sAdminEd" onmouseover= "expand('<?php echo $secondMenu?>');" onmouseout ="((collapseFlag == true) ? collapse('<?php echo $secondMenu?>'): expand());">
            <div id="second-sub-menu">
                <ul class="second-sub-menu">
                    <li><a href="">Item1</a></li>
                    <li><a href="">Item2</a></li>       
                </ul>   
            </div>                  
        </div>  
        <div id="Bar" class="chartType">
            <ul class="second-sub-menu">
                <li><a href="">Item1</a></li>
                <li><a href="">Item2</a></li>   
            </ul>
        </div>
        <div id="Pies" class="chartType">
            <ul class="second-sub-menu">
                <li><a href="">Item1</a></li>
                <li><a href="">Item2</a></li>   
            </ul>
        </div>
        <div id="Line" class="chartType">
            <ul class="second-sub-menu">
                <li><a href="">Item1</a></li>
                <li><a href="">Item2</a></li>                           
            </ul>
        </div>
        <div id="Table" class="chartType">
            <ul class="second-sub-menu">
                <li ><a href="">Item1</a></li>
                <li ><a href="">Item2</a></li>  
            </ul>
        </div>
        <div id="Gauge" class="chartType">
            <ul class="second-sub-menu">
                <li ><a href="">Item1</a></li>
                <li ><a href="">Item2</a></li>  
            </ul>
        </div>          
    </div>
</div>