如何在 css 中制作 ul 和 li 样式仅用于菜单

Question

我的水平菜单有这样的样式

<style>
 ul  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
   float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}
</style>

在我的 HTML 中，我的水平菜单有这样的代码

<ul>
 <li ><a href="#home">Home</a></li>
 <li ><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

我的水平菜单正在工作，问题是当我在 HTML 代码的另一部分（不适用于水平菜单）中具有另一个 ul 和 li 时，如下所示

<ul>
 <li >Parth 1</li>
 <li >part 2</li>
</ul>

他们的风格遵循我的水平菜单的样式，我是CSS代码的新手，所以有什么帮助吗？

Answer 1

在你的ul上放一个class，让你的风格规则依赖于该类而不是ul。不要使用内联样式。

.menu  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
.menu li {
   float: left;
}
.menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.menu li a:hover:not(.active) {
  background-color: #111;
}
.menu li a.active {
  float: right;
}
.active {
  background-color: #4CAF50;
}

<ul class="menu">
 <li><a href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a class="active" href="#about">About</a></li>
</ul>
<ul>
 <li>Part 1</li>
 <li>part 2</li>
</ul>

Answer 2

首先，迈出一步并学习 css 的工作很棒！你会爱上它的。

您在这里需要学习的是添加一个类或 id，以便只选择菜单中的ul和li。

也许你的代码看起来像这样。

<ul class="mainMenu">
 <li ><a href="#home">Home</a></li>
 <li ><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

在这种情况下，您提到的水平样式必须像...

ul.mainMenu (or just .mainMenu)  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
.mainMenu li {
   float: left;
}
/* And so on... */
.mainMenu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

在你进一步学习 css 之前，你绝对应该花一些时间来了解类和 ID 以及如何将它们用作你的选择器 - 这将有助于使 CSS 更加有趣。干杯！

Answer 3

将一个类分配给 ul 并将其用作 CSS 中的选择器：

<ul class="mymenu">
 <li ><a href="#home">Home</a></li>
 <li ><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

.CSS：

ul.mymenu  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
.mymenu li {
   float: left;
}
.mymenu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.mymenu li a:hover:not(.active) {
  background-color: #111;
}
.mymenu .active {
  background-color: #4CAF50;
}

Answer 4

你给菜单一个类class="myclass"或一个 id id="myid"（推荐类），例如

<ul class="menu">，然后使用.menu {...}和.menu li {...}等来定位它。这将使任何其他<ul>保持不变。

请注意，一个类可以与多个元素一起使用，但 id 必须是唯一的。

Answer 5

您可以使用

class或id HTML的属性来执行此操作：

 <ul id= "itemList">
  <li class="item"><a href="#home">Home</a></li>
  <li class="item"><a href="#news">News</a></li>
  <li class="item"><a href="#contact">Contact</a></li>
  <li class="item" style="float:right"><a class="active" href="#about">About</a></li>
 </ul>

然后：

#itemList {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
#itemList .list {
   float: left;
}
#itemList .list a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}