Question

我有一个用于定义导航栏的CSS文件。导航栏本身工作，看起来很棒。问题是它已经接管了LI和A标签，因此当在页面后面使用这些标签时，它们看起来完全错误。我刚刚开始使用CSS文件（在很长一段时间内没有进行任何Web开发）所以我不确定如何修复后面的标签，同时仍然能够保持导航栏的工作原理。我可以通过为后面的LI标记分配一个类来修复大多数属性，但不是全部（例如，边缘和填充似乎不会通过在类中重新声明它们来更改）。有任何清理它的想法吗？

导航栏的CSS：

ul {
    width: 100%;
    padding: 0;
    margin: 10px auto 50px auto;
    position: relative;
    background: #000;
}   

li {
    padding: 0;
    margin: 0;
    position: relative;
}

li a { 
    display: block;
    color: #000;
    background: #0C9687;
    text-align: center;
    border-bottom: 3px solid #000000;
    height: 100%;
    white-space: nowrap;
    text-decoration: none;
}

li a:hover, li ul li a:hover {
    background: #06B7F9;
    color: #fff;
}

/*sub menus*/
ul li:hover ul {
    display: block;
}

ul li ul {
    display: none;
    position: relative;
    z-index: 1;
    height: 0;
    width: 100%;
    margin: 0;
}

li li a {
    white-space: normal;
    width: 100%;
    border-bottom: 1px solid #ddd;
}

ul.flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

ul.flex li {
    display: block;
    -webkit-flex-grow: 1;
    -ms-flex: 1;
    flex-grow: 1;
}

ul.flex li a {
    height: auto;
    white-space: normal;
}

ul.flex ul {
    position: absolute;
    top: 100%;
    z-index: 1;
    height: auto;
}

这是我定义的类，试图将其恢复正常：

#dfltli {
    display: block;
    list-style: disc outside;
    background: linen;
    padding: 20;
    margin: 20;
    position: relative; 
}

在html中调用的内容如下：

This is an unordered list
<ul>
  <li>The marker (disc) should be lined up with the first letter</li>
  <li>in the line above it. But instead it is far to the left so</li>
  <li>padding and margin seem to be ignored. The Dev Options show</li>
  <li>that margin and padding are set to 0</li>
</ul>

Answer 1

这通常通过限制与导航栏相关的CSS规则的范围来完成。

例如，像这样编写HTML：

<div class="navbar">
  <ul>
    <li><a href="/home">Home page</a></li>
    <li><a href="/stuff">Stuff</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

然后使用.navbar为导航菜单添加CSS规则前缀，例如：

.navbar ul { margin: 0; padding: 0 }
.navbar li { list-style-type: none; }
/* --- etc --- */

如何覆盖CSS继承的属性

1 个答案: