将样式应用于类而不影响导航 LI 中的其他样式？

Question

当向 bmenu 添加样式更重要的是 margin/padding、字体大小、字体粗细到 btmenu 时，它也将它们应用于它下面的所有子菜单，如子菜单 li 。我怎样才能分离样式而不将它们应用到子菜单？
我不希望文本看起来像向下 50 像素，不希望字体粗细或居中。.我怎样才能只对类应用样式而不影响其他？？？？？。
无论我适用哪种风格：
btmenu li a
它将应用于
子菜单 li a
我不想让每个样式分开。

#btmenu{
z-index:1;
position:relative;
width:100%;
list-style: none;
margin:0;
padding:0;
height:62px;
text-align:center;/* this is applied to submenu*/
}
#btmenu > a{
font-weight:bold;/* this is applied to submenu*/
font-size:15px;/* this is applied to submenu*/
height:62px;/* this is applied to submenu*/
line-height:62px;/* this is applied to submenu*/
text-align:center;/* this is applied to submenu*/
}
ul#btmenu > li{ 
padding:0;
margin:0;
display: inline;
}
#btmenu li > a{
margin-left:1%;
margin-right:1%;
text-align:center;
display:inline-block;
text-decoration:none;
color:#000;
padding-left:1%;
padding-right:1%;
text-transform:uppercase;
vertical-align: middle;
}
#btmenu > li > a:hover{
background-color:#333;
color:#FFF; 
}
/*     SUB MENU     */
.sub_menu{
display:none;
}
#btmenu > li:hover > .sub_menu{
position:absolute;
display:inline-block;/*no need for height or width*/
vertical-align: middle;
margin:0 auto;
text-align:center;
background-color:#666;
list-style: none;
margin:0;
padding:0;
display:table;
padding-right:3px;
border:#333 solid 2px;
border-radius: 4px;
}
.sub_menu > li{
margin:0px;
border: 1px solid blue;
display:inline-block;
vertical-align: middle;
height:125px;
width:47%;
}
.sub_menu  > li a{
display:block;
vertical-align: middle;
height:200px;
width:200px;
text-decoration:none;
color:#FFF;
margin:0;/* not applied??*/
padding:0;/* not applied???*/
}
.ee{margin:0;
padding:0;}

<ul id="btmenu">



<li class="top_quote">
  <a href="services">services</a>
<ul class="sub_menu">
<li class=""><a href="services"><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href="services"><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href="services"><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href="services"><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href="services"><img src="" width="189" height="189" alt=""></a></li>
</ul>



</li>



<li class="top_quote">
<a href="locations">locations</a>
 

<ul class="sub_menu">
<li class="ee"><a href="tel:16142585555">test1</a></li>
<li class="ee"><a href="tel:16148411111 ">test2</a></li>
<li class="ee"><a href="tel:16148859957">test3</a></li>
<li class="ee"><a href="tel:16148689999">test4</a></li>
<li class="ee"><a href="tel:16144212222">test5</a></li>
<li class="ee"><a href="tel:16144978888">test6</a></li>
<li class="ee"><a href="tel:16142585555">test7</a></li>
<li class="ee"><a href="tel:16148690006">test8</a></li>
</ul>

</li>


<li class="top_quote"><a href="partners">partners</a>
 

<ul class="sub_menu">
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>

</ul>




</li>
<li class="top_quote"><a href="ourwork">our work</a></li>
<li class="top_quote"><a href="contact">contact</a></li>


</ul>

Answer 1

您的问题不是很清楚，但如果您的问题是如何将样式应用到特定的 li 元素而不是其他 li 元素，那么您可以这样做：

ul > li {
  color: blue;
}

ul > li.specific {
  color: red;
}

ul > li.specific:hover {
  color: purple;
}

<ul>
  <li class="specific">Specific li</li>
  <li>Another li</li>
  <li>Another li</li>
</ul>

Answer 2

以下规则

#btmenu{
  font-weight:bold;/* this is applied to submenu*/
  font-size:15px;/* this is applied to submenu*/
  height:62px;/* this is applied to submenu*/
  line-height:62px;/* this is applied to submenu*/
}

应该直接应用于您真正想要它们的元素。 #btmenu没有任何文字；它的后代做。您目前依靠样式继承来使顶级菜单具有样式，但结果是较低级别的菜单也具有样式。

所以这可能是一个更好的选择器（您稍后已经使用过）：

#btmenu > li > a {
  font-weight:bold;
  font-size:15px;
  height:62px;
  line-height:62px;
}

至于 text-align: center，我假设您真的想要在 <ul> 上使用它，因此您稍后将不得不使用类似以下内容的方法来打破继承链：

#btmenu {
  text-align: center;
}
#btmenu > ul {
   text-align: left;
}

Answer 3

将样式从 .btmenu 移动到

#btmenu > a {
font-weight:bold;/* this is applied to submenu*/
font-size:15px;/* this is applied to submenu*/
height:62px;/* this is applied to submenu*/
line-height:62px;/* this is applied to submenu*/
}

将样式应用于类而不影响导航 LI 中的其他样式？

Apply style to the classes and not effect the others in navagation LI?

html

css

styles

将样式应用于 类 而不影响导航 LI 中的其他样式？

Apply style to the classes and not effect the others in navagation LI?

html

css

styles

将样式应用于类而不影响导航 LI 中的其他样式？