如何使用一個選擇器來定位這些兒童div？

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

我認爲你正在尋找這樣的：

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

Answer 2

克里斯的評論是做它的方式。添加一個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>