堆叠列表中的 CSS 选择器

Question

我正在尝试在我既未编写也未选择的模板主题中设置导航样式。 nav 在其结构中使用列表，不同级别的子级具有相同的类。我希望有人能帮我找到合适的 CSS 选择器来选择第三层。这是基本结构:

<nav class="nonbounce desktop vertical">
 <ul>
  <li class="item sub active">
   <a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
   <ul class="subnav">
    <li class="subitem">
     <a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
     <ul class="subnav">
      <li class="subitem">
      <a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a>  THIS ONE!!!
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</nav>

我需要做的是捕获第 3 层(在示例中称为割草机)。 我的最终目标是设置此级别的样式并垂直移动它，但首先我需要能够使用 CSS 仅修改该级别。 这是一个新站点，但如果有帮助，我可以提供真实的站点 URL。 jc

Answer 1

你可以试试这个

.subitemLink[title~="mowers"] {
  font-size:20px;
}

<nav class="nonbounce desktop vertical">
 <ul>
  <li class="item sub active">
   <a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
   <ul class="subnav">
    <li class="subitem">
     <a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
     <ul class="subnav">
      <li class="subitem">
      <a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a>  THIS ONE!!!
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</nav>