如何仅修改嵌套ul导航栏中mobile、tablet对应li元素的高度

你可以通过两种精准匹配的方案实现需求，完全不会影响其他层级的li元素样式：

方案1：无需修改现有HTML，用CSS子选择器精准定位 #

该方案通过层级限制只命中mobile、tablet对应的两个li节点，核心是用>子选择器限制仅匹配直接子元素：

/* 仅匹配category下第一级子ul的直接子li，也就是mobile和tablet */
#main-menu > li:first-child > ul > li {
  height: 40px; /* 替换为你需要的高度值即可 */
  /* 可选：如果需要文字垂直居中可加 line-height: 40px; */
}

选择器逻辑说明：

• #main-menu > li:first-child 选中主菜单下第一个li（即category节点）
• > ul > li 仅选中category下直接嵌套的ul的直接子li，不会命中更深层级的iphone、手机型号等li节点，也不会命中主菜单的search、article等li节点。

方案2：添加自定义类名，可维护性更高 #

如果后续可能调整导航结构，更推荐给目标li加专属类名，避免结构变更导致样式失效：

1. 修改HTML部分，给mobile、tablet对应的li加类名：

<ul id="main-menu">
  <li>category
    <ul>
      <!-- 加自定义类名level2-menu-item -->
      <li class="level2-menu-item">mobile
        <ul>
          <li>iphone
            <ul>
              <li>11</li>
              <li>12</li>
              <li>13</li>
            </ul>
          </li>
          <li>samsung
            <ul>
              <li>note 9</li>
              <li>note 10</li>
              <li>note 11</li>
            </ul>
          </li>
          <li>nokia
            <ul>
              <li>c1</li>
              <li>c2</li>
              <li>c3</li>
            </ul>
          </li>
        </ul>
      </li>
      <!-- 加自定义类名level2-menu-item -->
      <li class="level2-menu-item">tablet</li>
    </ul>
  </li>
  <li>search</li>
  <li>article</li>
</ul>

2. 编写对应CSS：

.level2-menu-item {
  height: 40px; /* 替换为你需要的高度值即可 */
}

内容的提问来源于stack exchange，提问作者hamo