Question

我正在开发一个有多个级别的CSS菜单。在这个级别上，我有一个div，每个主题都有ID（Bar，Pie，Line等）。有没有一种方法可以在一个地方设置所有这些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

克里斯的评论是这样做的。向相关元素添加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>

Answer 2

我认为你正在寻找这个：

#Bar,#Pies,#Line,#Table,#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%;
}

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

2 个答案: