html - 如何在 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>