1

如何将不同样式应用于 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;
         }
4

4 回答 4

5

在 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;
     }
于 2012-08-21T06:53:43.913 回答
1

There are several problems in your code. Try following

However class is if you use it in many places you should use id if it is just in one place like the menu.

<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>
于 2012-08-21T07:14:30.090 回答
1

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

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

以上将适用于页面的ul内部.others和所有li外部。只需使用

.others ul, .others li {
   /*.....*/
}
于 2012-08-21T06:55:26.213 回答
0

我认为它正在工作。

看演示

您的标记不正确

<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

于 2012-08-21T06:58:04.810 回答