我如何覆盖CSS继承的属性

我有一个CSS文件，我用它来定义一个导航栏。导航栏本身工作并且看起来很棒。问题在于它已经接管了LI和A标签，以便稍后在页面中使用这些标签时，它们看起来完全错误。我刚刚开始使用CSS文件（在很长一段时间内没有做过任何Web开发），所以我不知道如何修复后面的标签，同时仍然能够保留导航栏的工作原理。我可以通过给后面的LI标签分配一个类来修复大部分属性，但并不是所有的属性（例如边缘和填充都不会在类中重新声明而改变）。任何想法来清理它？我如何覆盖CSS继承的属性

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>

来源

2015-09-21 user2021539

'important'与CSS属性！。 – divy3993

而不是固定常规列表我会给你的导航栏一个类，并在所有导航栏样式前添加.classname，然后其他列表将看起来正常，无需重写任何东西。！重要的只应作为最后的手段，当你用尽所有其他特异性选项。 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity –

这通常通过限制与导航栏相关的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 --- */

来源

2015-09-21 20:15:38

完美！谢谢！ :) – user2021539

我如何覆盖CSS继承的属性

回答

相关问题