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

Question

如果#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 处于目标状态时，我无法 Hook .toggler。由于 #togglenav 不再是 .toggler 的祖先，因此该按钮始终保持橙色。如果#togglenav 仍然是目标，是否有一种优雅的方法来捕获 .toggler？最好的问候拉尔夫

Answer 1

因为 .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 时，它是多余的。