为什么伪类 :active 不起作用？答案

【问题标题】：Why doesn't the pseudo class :active work?为什么伪类 :active 不起作用？
【发布时间】：2019-11-15 23:07:43
【问题描述】：

我的网页有一个Bootstrap dropdown button，我给了四个下拉项。他们每个人都有一个 javascript 事件，可以动态翻译页面的某些元素（因此四个下拉项被命名为“en”、“es”、“fr”、“it”）：

<div class="btn-group">
                <button id="translate" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-language"></i>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#lang-en" onclick="window.lang.change('it');return false;">It</a>
                    <a class="dropdown-item" href="#lang-en" onclick="window.lang.change('fr');return false;">Fr</a>
                    <a class="dropdown-item" href="#lang-en" onclick="window.lang.change('en');return false;">En</a>
                    <a class="dropdown-item" href="#lang-en" onclick="window.lang.change('es');return false;">Es</a>
                </div>
            </div>

我想在选择一种语言时更改四个下拉项的样式。例如，当用户点击“fr”下拉项时，页面的元素会被翻译成法语；当她/他再次打开下拉菜单时，“fr”项被赋予蓝色。

这是我正在尝试做的一个例子：

我希望该下拉项的颜色在页面语言为“法语”的整个过程中保持蓝色。

我一直在尝试使用 CSS 伪类 :active 来实现这个目标，但没有成功：

.dropdown-item:active{
    background-color: black;
    color: blue;
}

更具体地说，只有在单击该项目时，背景颜色才会转换为“黑色”，而我希望它保持黑色，直到选择另一种语言。

我是否使用了错误的伪类，还是应该选择其他 CSS 选择器或替代方法？

【问题讨论】：

我认为选择下拉项时，bootstrap会添加另一个名为active的类，您应该在CSS中选择它，如.dropdown-item .active，看它是否有效。 span>
:active 表示“在被激活时”。它是为“当你点击一个按钮时，它看起来像是被按下，当你停止点击时，它又弹回来”这样的效果而设计的。
感谢@Quentin。我可以改用 ':visited' 吗？
不，因为那是“URL 存在于历史中”，所以用户访问过的每个语言版本都会被匹配。

标签： javascript css css-selectors pseudo-class

【解决方案1】：

:active 表示“激活时”。它是为“当你点击一个按钮时，它看起来像是被按下，当你停止点击时，它又弹回来”这样的效果而设计的。

“一组按钮中的最后一个，每个都运行 JavaScript，被点击”没有伪类。

您已经以XY Problem 的形式表达了您的问题，所以让我们回到实际问题：

如何选择指向文档当前语言版本的链接？

首先，让你的 JavaScript 不显眼。

<a class="dropdown-item" 
   href="/it/this/document"
   hreflang="it"><abbr title="Italian">It</abbr></a>

<script>
    const langlinks = Array.from(document.querySelector(".dropdown-item"));
    langlinks.forEach(link => link.addEventListener("click", changeLang);
    function changelang (event) {
        window.lang.change(event.target.hreflang);
        event.preventDefault();
    }
</script>

然后确保当你改变语言时，你在标记中表达出来：

<html lang="it">

然后您可以使用language pseudo-class 编写选择器：

html:lang(it) .dropdown-menu[hreflang=it] {
    /* ... */
}

遗憾的是，我们无法使用 CSS 以编程方式将 it 的两个实例映射到那里，因此您需要为每种语言添加一个选择器。

【讨论】：