如果目标是#togglenav,我使用以下选择器在单击时为图标字体图标(.toggler)着色:
.toggler {
color:orange;
}
body:not(:target) #togglenav:target .toggler {
color: lighten(orange, 25%);
}
因此,未单击按钮时图标颜色为橙色,单击时变为浅橙色变体。html 如下所示:
<nav role="navigation">
<ul class="navio" id="togglenav" tabindex="0">
<li><a href="#togglenav" class="icon-alone toggler" title="Menu open and close">
<span aria-hidden="true" data-icon="t"></span>
<span class="screen-reader-text">Menu open and close</span></a>
</li>
--><li><a class="navbase" href="#nav1">Menu 1</a></li><!--
--><li><a class="navbase" href="#nav2">Menu 2</a></li><!--
--><li><a class="navbase" href="#nav3">Menu 3</a></li><!--
--><li><a class="navbase" href="#nav4">Menu 4</a></li><!--
--><li><a class="navbase" href="#nav5">Menu 5</a></li><!--
--><li class="togglereset" aria-hidden="true"><a href="#top">Back to top</a></li>
</ul>
</nav>
现在我必须更改 .toggler 类“a”元素的位置,并将其与 #togglenav 无序列表放在同一级别。
<nav role="navigation">
<a href="#togglenav" class="icon-alone toggler" title="Menu open and close">
<span aria-hidden="true" data-icon="t"></span>
<span class="screen-reader-text">Menu open and close</span>
</a>
<ul class="navio" id="togglenav" tabindex="0">
<li><a class="navbase" href="#nav1">Menu 1</a></li><!--
--><li><a class="navbase" href="#nav2">Menu 2</a></li><!--
--><li><a class="navbase" href="#nav3">Menu 3</a></li><!--
--><li><a class="navbase" href="#nav4">Menu 4</a></li><!--
--><li><a class="navbase" href="#nav5">Menu 5</a></li><!--
--><li class="togglereset" aria-hidden="true"><a href="#top">Back to top</a></li>
</ul>
</nav>
现在的问题是,当#togglenav 处于目标状态时,我无法获得 .toggler 的钩子。由于#togglenav 不再是 .toggler 的祖先,因此按钮始终保持橙色。如果#togglenav 仍然是目标,是否有一种优雅的方法来捕获 .toggler ?最好的问候拉尔夫