html - 如何使样式不适用于子元素？

Question

我正在制作一个大型下拉菜单，对于主菜单，我在下面列出了某种样式，但我希望这种样式仅适用于第一个列表，即主菜单。我不希望它应用于大型下拉菜单中的任何列表，有没有一种方法可以做到这一点而不必覆盖子列表中的这些样式？

#main-nav ul li {
width: 12.5%;
float: left;
text-align: center;
line-height: .9em;
font-weight: bold;
border-left: 2px solid #33363b;
background: #25272a;
border-radius: 4px;
}

#main-nav ul li a {
display: block;
color: #FFF;
line-height: 12px;
font-size: 14px;
padding: 22px 0;
text-decoration: none;
}

#main-nav ul li a:hover {
text-decoration: none;
color: #3B8DBD;
cursor: pointer;
background: #191a1c;
}

Answer 1

试试这个，

#main-nav > ul > li {
width: 12.5%;
float: left;
text-align: center;
line-height: .9em;
font-weight: bold;
border-left: 2px solid #33363b;
background: #25272a;
border-radius: 4px;
}

#main-nav > ul > li > a {
display: block;
color: #FFF;
line-height: 12px;
font-size: 14px;
padding: 22px 0;
text-decoration: none;
}

#main-nav > ul > li > a:hover {
text-decoration: none;
color: #3B8DBD;
cursor: pointer;
background: #191a1c;
}