如何在css中將父元素與父元素分開？

Question

我triying這兩個菜單結合： http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/ http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/

第一個將保持不變，並在第二個子菜單將與其一起使用。但是，當我開始改變CSS代碼，並使這些合併，我總是遇到一個特定的錯誤。 「響應式視網膜就緒菜單」的「ul，li和a」屬性會影響我從「疊加效果菜單」中選取的子菜單，並且我無法分離這些屬性。我的意思是它顯示子菜單，因爲它與主菜單具有相同的風格。我能做些什麼呢？

一個我：

<div class="main clearfix"> 
       <nav id="menu" class="nav">     
        <ul> 
         <li> 
          <a href="#"> 
           <span class="icon"> 
            <i aria-hidden="true" class="icon-home"></i> 
           </span> 
           <span>Menu 1</span> 
          </a><div class="cbp-hrsub"> 

         </li> 
         <li> 
          <a href="#"> 
           <span class="icon"> 
            <i aria-hidden="true" class="icon-services"></i> 
           </span> 
           <span>Menu 2</span> 
          </a> 
         </li> 
         <li> 
          <a href="#"> 
           <span class="icon"> 
            <i aria-hidden="true" class="icon-portfolio"></i> 
           </span> 
           <span>Menu 3</span> 
          </a> 
         </li> 
         <li> 
          <a href="#"> 
           <span class="icon"> 
            <i aria-hidden="true" class="icon-blog"></i> 
           </span> 
           <span>Menu 4</span> 
          </a> 
         </li> 
         <li> 
          <a href="#"> 
           <span class="icon"> 
            <i aria-hidden="true" class="icon-team"></i> 
           </span> 
           <span>Menu 5</span> 
          </a> 
         </li> 
         <li> 
          <a href="#"> 
           <span class="icon"> 
            <i aria-hidden="true" class="icon-contact"></i> 
           </span> 
           <span>Menu 6</span> 
          </a> 
         </li> 
         <li> 
          <a href="#"> 
           <span class="icon"> 
            <i aria-hidden="true" class="icon-contact"></i> 
           </span> 
           <span>Menu 7</span> 
          </a> 
         </li> 
         <li> 
          <a href="#"> 
           <span class="icon"> 
            <i aria-hidden="true" class="icon-contact"></i> 
           </span> 
           <span>Menu 8</span> 
          </a> 
         </li> 
        </ul> 
       </nav> 
      </div> 

一個我想：

<div class="main clearfix"> 
     <nav id="menu" class="nav">     
      <ul> 
       <li> 
        <a href="#"> 
         <span class="icon"> 
          <i aria-hidden="true" class="icon-home"></i> 
         </span> 
         <span>Menu 1</span> 
        </a><div class="cbp-hrsub"> 
         <div class="cbp-hrsub-inner"> 
          <div> 
           <h4>Learning &amp; Games</h4> 
           <ul> 
            <li><a href="#">Catch the Bullet</a></li> 
            <li><a href="#">Snoopydoo</a></li> 
            <li><a href="#">Fallen Angel</a></li> 
            <li><a href="#">Sui Maker</a></li> 
            <li><a href="#">Wave Master</a></li> 
            <li><a href="#">Golf Pro</a></li> 
           </ul> 
          </div> 
          <div> 
           <h4>Utilities</h4> 
           <ul> 
            <li><a href="#">Gadget Finder</a></li> 
            <li><a href="#">Green Tree Express</a></li> 
            <li><a href="#">Green Tree Pro</a></li> 
            <li><a href="#">Wobbler 3.0</a></li> 
            <li><a href="#">Coolkid</a></li> 
           </ul> 
          </div> 
          <div> 
           <h4>Education</h4> 
           <ul> 
            <li><a href="#">Learn Thai</a></li> 
            <li><a href="#">Math Genius</a></li> 
            <li><a href="#">Chemokid</a></li> 
           </ul> 
           <h4>Professionals</h4> 
           <ul> 
            <li><a href="#">Success 1.0</a></li> 
            <li><a href="#">Moneymaker</a></li> 
           </ul> 
          </div> 
         </div><!-- /cbp-hrsub-inner --> 
        </div> 
       </li> 
       <li> 
        <a href="#"> 
         <span class="icon"> 
          <i aria-hidden="true" class="icon-services"></i> 
         </span> 
         <span>Menu 2</span> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <span class="icon"> 
          <i aria-hidden="true" class="icon-portfolio"></i> 
         </span> 
         <span>Menu 3</span> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <span class="icon"> 
          <i aria-hidden="true" class="icon-blog"></i> 
         </span> 
         <span>Menu 4</span> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <span class="icon"> 
          <i aria-hidden="true" class="icon-team"></i> 
         </span> 
         <span>Menu 5</span> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <span class="icon"> 
          <i aria-hidden="true" class="icon-contact"></i> 
         </span> 
         <span>Menu 6</span> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <span class="icon"> 
          <i aria-hidden="true" class="icon-contact"></i> 
         </span> 
         <span>Menu 7</span> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <span class="icon"> 
          <i aria-hidden="true" class="icon-contact"></i> 
         </span> 
         <span>Menu 8</span> 
        </a> 
       </li> 
      </ul> 
     </nav> 
    </div> 

Answer 1

就像我在我的評論中提到，你需要單獨指定樣式父和子元素。

例如，爲了設置list-style:none於母公司ul是你需要以下CSS選擇器：

ul { 
    list-style:none; 
} 

保持默認樣式兒童ul S，你需要後添加以下選擇前一個：

ul ul { 
    list-style:disc; 
} 

Here's a demo基礎上以最小的造型OP給出的HTML，但說明你下的方式風格父母和孩子的元素分開。 （注意：將鼠標懸停在菜單1上）