css如何强制继承,如何覆盖CSS继承的属性

我有一个用于定义导航栏的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

  • The marker (disc) should be lined up with the first letter
  • in the line above it. But instead it is far to the left so
  • padding and margin seem to be ignored. The Dev Options show
  • that margin and padding are set to 0

你可能感兴趣的:(css如何强制继承)