Question

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

MENU

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

Answer 2

你犯了小错误，你在下面的部分中概括了li的风格。

.others ul,li { ..... }

以上内容适用于ul内的.others以及页面内的所有li。只需使用

.others ul, .others li {
   /*.....*/
}

Answer 3

您的代码中存在几个问题。试试以下

但是，如果你在许多地方使用它，那么你应该使用id，如果它只是在菜单这样的地方。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>


        <style>
.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;
}



        </style>

    </head>
    <body>
  <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>

    </body>
</html>

Answer 4

我认为它正在发挥作用。

<强> See Demo

您的标记不正确

<li><a href="#"><Link 1</a></li>
<li><a href="#"><Link 1</a></li>
<li><a href="#"><Link 1</a></li>

相反它应该是

<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>

还尝试通过执行类似

的操作将样式应用于li元素

.menu ul li

而不是

.menu ul,li

如何设置<ul>和<li>的样式而不影响MENU </li> </ul>

4 个答案: