html - 当目标是另一个元素(而不是祖先)时，如何获得一个钩子(Hook)

如果#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？最好的问候拉尔夫

最佳答案

由于.toggler现在是#togglenav的在前同级，并且没有在前的同级选择器，因此当.toggler处于新结构的目标状态时，您将无法选择#togglenav。

查看是否可以将.toggler移到#togglenav之后并相应地更新布局CSS：

<nav role="navigation">
    <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>
    <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>
</nav>

如果可以这样做，则要使用的选择器将为#togglenav:target + .toggler。如我的评论所述，我省略了body:not(:target)，因为当您已经将其他元素指定为:target时，它是多余的。