HTML DIV 与它所在的 DIV 相矛盾

Question

对于我正在制作的网站上的导航，我使用的是使用无序列表设置的边栏。列表中也有多个列表。我也使用了多个 div。我现在遇到了在 div 内部形成的问题，我需要设置一些与它所在的 div 相矛盾的代码。在我的例子中，我有 line-height: 35px; 的 css;我需要将其编辑为 15px。

这是我需要编辑的代码，它是中心(子列表)

<li>
  <h2> Tech Ed. Classes</h2>
  </div>
  <div id="sidebarLinks"><!-- USE THIS DIV SECTION FOR A LIST WITH BULLET POINTS -->
    <ul>
       <li><a href="index.html"><strong><em>Main Page</em></strong></a></li>
       <li><a href="construction.html">Construction</a></li>
       <li><a href="drafting.html">Drafting</a></li>
       <li><a href="electronics.html">Electronics</a></li>
    <ul id="subList">
       <li ><a href="#">INTRODUCTION TO ELECTRONICS</a></li>
       <li><a href="#">EXPLORING CAREERS IN ELECTRONICS</a></li>
   </ul>
       <li><a href="graphic.html">Graphic arts </a></li>
       <li><a href="Manufacturing.html">Manufacturing</a></li>
       <li><a href="project.html">Project Lead the Way</a></li>
       <li><a href="transport.html">Transportation, Distribution, & Logitstics</a></li>
       <li><a href="woodworking.html">Wood Working</a></li>
    </ul>
  </div>
</li>

Answer 1

您可以通过向要更改的元素添加一个 css 类来实现此目的，使其与它们所在的 div 不同。例如:

li {
    line-height: 35px;
}

.smaller {
    line-height: 15px;
}

此 CSS 将使所有 <li> 上的行高等于 35px 的元素，<li> 除外类别为 smaller 的元素.这些将具有 15px 的行高。例如:

<ul>
    <li>This will have a line height of 35 pixels.</li>
    <li class="smaller">This will have a height of 15 pixels.</li>
</ul>
<ul class="smaller">
    <li>This will have a line height of 15 pixels, the ul has a class of smaller.</li>
    <li class="smaller">This will have a height of 15 pixels as well.</li>
</ul>

JSFiddle