Question

我最近开始学习HTML，JavaScript和CSS，并创建了自己的网页。我在页面顶部创建了一个导航栏，并使用CSS对其进行样式设置。然后我创建了另一个列表，但是当在页面上查看时，CSS已经设置了页面上的所有列表，而不仅仅是导航栏。有没有办法来设计一个但不是全部？我的代码如下。

#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}

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: #008080;
}

<h1>The Great Pyramid of Giza</h1>
<ul>
  <li><a href="Seven Wonders.html">Homepage</a></li>
  <li><a class="active" href="Great Pyramid of Giza.html">The Great Pyramid of Giza (Honoray)</a></li>
  <li><a href="Great Wall of China.html">The Great Wall of China</a></li>
  <li><a href="Petra.html">Petra</a></li>
  <li><a href="The Colosseum.html">The Colosseum</a></li>
  <li><a href="Chichen Itza.html">Chichen Itza</a></li>
  <li><a href="Machu Pichu.html">Machu Picchu</a></li>
  <li><a href="Taj Mahal.html">Taj Mahal</a></li>
  <li><a href="Christ the Redeemer.html">Christ the Redeemer</a></li>
</ul>
<h2>What is it?</h2>
<p>The Great Pyramid of Giza is the oldest and largest of the three Pyramids in the Giza, in Egypt. It largely still remains intact.</p>
<h2>Some Facts</h2>
<ul>
  <li>It stands at 139 metres tall.
    <li>
</ul>

Answer 1

您只需向ul添加class，并仅设置包含class的列表。然后，您可以将仅应用于class的任何样式移动到该class的css条目中。您可以对列表项执行相同的操作。您可以像使用元素名称一样使用类名。您也可以使用id元素。

<强> html的

<ul class="nav-bar-list">
    <li class="nav-bar-list-item">...</li>
</ul>

<强>的CSS

.nav-bar-list {
    background-color: #333;
}

.nav-bar-list-item {
    float: left;
}

.nav-bar-list-item a {
    // any other css you want
}

Answer 2

Here you go

我刚刚为你的导航

创建了一个类

.mainnav

并定义了需要在该类中设置样式的内容

如何在不设置所有列表样式的情况下着色导航栏？

2 个答案: