Question

我正在尝试在我既不写也不挑选的模板主题中设置导航样式。导航在其结构中使用列表，并且各级别的子级具有相同的类。我希望有人可以帮我找到合适的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仅修改该级别。这是一个新网站，但如果有帮助，我可以提供真实的网站网址。 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>

堆叠列表中的CSS选择器

1 个答案: