Question

我想在我的一个页面上创建一个水平导航栏，所以我使用了一个列表然后在CSS中编辑它。但是，同一页面也有其他列表，当我应用样式时，它已经为导航栏工作，但已经完全破坏了其他列表！我怎么绕这个？我已尝试过ID标签，但我不知道他们是否否决了将某种风格应用于所有列表？这是我的CSS代码：

#menubar {

list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;

}

li {

float: left;

}

li a {

display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;

}

页面上的所有列表都是标准的＆＃39;列表，即它们都是标准的{b}标准<ul>或<ol>没有id标记 - 除了导航栏列表，我称之为＆＃39;菜单栏＆＃39;。

Answer 1

对于menubar样式，如果您只想在#menubar

内部应用，则需要为其子元素应用menubar等ID

参见示例：

＆＃13;

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

＆＃13;

<ul id="menubar">
  <li><a>one</a></li>
  <li><a>two</a></li>
  <li><a>three</a></li>
</ul>

<ul>
  <li><a>normal one</a></li>
  <li><a>normal two</a></li>
  <li><a>normal three</a></li>
</ul>

＆＃13;

Answer 2

CSS的问题在于您将样式应用于所有“li”和“li a”元素。让它工作的最好方法是更具体地了解你想要应用CSS的位置。

尝试以下操作（使用上面的代码）。

#menubar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #85aff2;
}

#menubar li{
  float: left;
}

#menubar li a{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

Answer 3

如果您没有指定ID或类，则样式将影响每个匹配元素。

在您的示例中，您使用id＆＃34;菜单栏＆＃34;设置元素的样式，然后设置ALL＆＃34; li＆＃34;元素，最后所有＆＃34; li＆＃34;和＆＃34; a＆＃34;元件。

如果您希望仅将样式应用于导航菜单中的项目，可以给他们一个类似＆＃34; nav_menu＆＃34;的类，并编写如下样式：

.nav_menu {
    float: left;
}
.li_and_a {
    display: block;
    color:white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

所以你的浮动列表项目现在需要班级＆＃34; nav_menu＆＃34;列表项和项目需要＆＃34; li_and_a＆＃34;类。

这样做不会影响任何其他＆＃34; li＆＃34;或＆＃34; a＆＃34;页面上的元素，除非他们有特定的类。

Answer 4

有几种方法可以解决这个问题，但我认为在这一点上，最实用的方法是将:not()选择器与您的列表一起使用，并排除#menubar。

例如，如果您的#menubar是li的ID，则可以像这样添加：

li:not(#menubar) {
    /* your css */
}

li:not(#menubar) a {
    /* your css */
}

编辑28/02

我的理解是你的水平条带有#navmenu，你不想在CSS中生成其余的CSS。如果这是你想要的，这个解决方案确实有效。因为它是在jsfiddle上测试的。

https://jsfiddle.net/a2kj8vds/

CSS样式适用于所有内容的麻烦

4 个答案: