如何在不影响MENU的情况下设置<ul>和<li>的样式

Question

如何在HTML/CSS的不同部分将相同的元素应用于不同的样式.我尝试过以下它似乎不起作用.

菜单

   <div class="menu">
   <ul>
         <li><a href="#"><Link 1</a></li>
         <li><a href="#"><Link 1</a></li>
         <li><a href="#"><Link 1</a></li>
  </ul>
  </div>

在网页的某个地方

   <div class="others">
   <ul>
         <li><a href="#"><Link 1</a></li>
         <li><a href="#"><Link 1</a></li>
         <li><a href="#"><Link 1</a></li>
  </ul>
  </div>

CSS

     .menu ul,li{
         color: rgb(242,253,255);   
         list-style: none;
         text-decoration: none;
         font-size: 20px;
         font-family: chaparral pro;
         }

.others ul,li{
         color: rgb(242,253,255);   
         list-style: none;
         text-decoration: none;
         font-size: 10px;
         font-family: chaparral pro;
         }

Answer 1

,在CSS中使用均值'和',因此你的CSS子句都将适用于所有 li元素(并且最后定义的元素优先).试试简单:

.menu ul li{
     color: rgb(242,253,255);   
     list-style: none;
     text-decoration: none;
     font-size: 20px;
     font-family: chaparral pro;
     }

.others ul li{
     color: rgb(242,253,255);   
     list-style: none;
     text-decoration: none;
     font-size: 10px;
     font-family: chaparral pro;
     }