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处于目标状态时，我无法获得.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时，这是多余的。

当目标是另一个元素（不是祖先）时，如何在元素上获取钩子

1 个答案: