Html 无法在选定链接中保留CSS样式

我正在尝试更改所选链接的外观，但没有成功。 它应该与悬停链接时定义的外观相同

尝试在一些语法中使用：focus，如

李梅努法克：盘旋a，李：聚焦a{

但是，当链接失去悬停时，样式就消失了

我做错了什么

身体 html{ 左边距：自动； 右边距：自动； 宽度：70%； } 梅努法克先生{ 背景：fff； 字体系列：SegoeUI，Calibri，无衬线； 字号：2em； } 梅努法克{ 列表样式类型：无； 位置：相对位置； 左边距：-40px； /*为了避免用户代理chrome*/ } 李梅努法克先生{ 显示：内联块； 边缘顶部：10px； 边缘底部：10px； 宽度：49%； 背景：fff； 线高：80px； 文本对齐：居中； 盒影：2px3px4px0px rgba170、170、170、1； } 李梅努法克先生{ 显示：块； 颜色：020062； 背景：fff； 文字装饰：无； } 李曼努法克：将鼠标悬停在a上{ 颜色：fff； 背景：线性梯度90度，rgba2,0,98,10%，rgba89,120,167,150%； } ：目标{ 颜色：fff； 字号：1em； } div.items>div:not:target{ 显示：无 } div.items>div:target{ 显示：块； 左边距：自动； 右边距：自动； 颜色：000； 边框：1px实心aaa； } 用于解释类型A的长且可变的文本大小 [...] 用于解释TypeB的长且可变的文本大小 [...]

---

如果我理解正确，您希望链接在被单击时保留悬停状态的样式，从而显示其预期目标。如果是这样，您不能单独使用CSS来执行此操作。您可以使用Javascript添加/删除另一个应用相同样式的类。 使用jQuery：

$( document ).ready(function() {
    $(".target").click(function(){
        $(".target").removeClass('selected');
        $(this).addClass('selected');
    });
});

你问题中的CSS更新为

.menuFAQ li:hover a, .menuFAQ li a.selected  { color: #fff;
  background: linear-gradient(90deg, rgba(2,0,98,1) 0%, rgba(89,120,167,1) 50%);}

---

如果我理解正确，您希望链接在被单击时保留悬停状态的样式，从而显示其预期目标。如果是这样，您不能单独使用CSS来执行此操作。您可以使用Javascript添加/删除另一个应用相同样式的类。 使用jQuery：

$( document ).ready(function() {
    $(".target").click(function(){
        $(".target").removeClass('selected');
        $(this).addClass('selected');
    });
});

你问题中的CSS更新为

.menuFAQ li:hover a, .menuFAQ li a.selected  { color: #fff;
  background: linear-gradient(90deg, rgba(2,0,98,1) 0%, rgba(89,120,167,1) 50%);}

---

据我所知，您希望在选择链接且光标不再悬停后样式保持不变。如果是这种情况，则如果您希望按照以下要求使用目标，则无法单独使用CSS：

然而，你也许可以通过使用：active pseudo或使用一些JS来获得爵士音乐

更新： 我无法获得：积极的工作，可能必须使用JS

JS 这是非常基本的，但是如果你把它放在你的身体底部

<script>
    function selectActive(hash) {
        for (const element of document.querySelectorAll("li a")) {
            element.classList.remove("selected")
        }
        document.querySelector(`[href="${hash}"]`).classList.add("selected")
    }
    addEventListener("hashchange", () => {
        selectActive(window.location.hash);
    })
    selectActive(window.location.hash);
</script>

---

我不会在生产中使用它，但这是一个值得思考的问题：

据我所知，您希望在选择链接且光标不再悬停后保持样式不变。如果是这种情况，如果您希望按照以下要求使用目标，则无法单独使用CSS：

然而，你也许可以通过使用：active pseudo或使用一些JS来获得爵士音乐

更新： 我无法获得：积极的工作，可能必须使用JS

JS 这是非常基本的，但是如果你把它放在你的身体底部

<script>
    function selectActive(hash) {
        for (const element of document.querySelectorAll("li a")) {
            element.classList.remove("selected")
        }
        document.querySelector(`[href="${hash}"]`).classList.add("selected")
    }
    addEventListener("hashchange", () => {
        selectActive(window.location.hash);
    })
    selectActive(window.location.hash);
</script>

---

我不会在生产中使用它，但它是值得思考的：

以下是如何使用javascript跟踪活动状态

const allTargetLinks=document.queryselectoral'.target' AllTargetLink.forEachtargetLink=>{ targetLink.addEventListener'click'，=>{ AllTargetLink.forEachtargetLink=>{ targetLink.classList.删除“活动” } targetLink.classList.add'active' } } 正文，html{margin left:auto；margin right:auto；width:70%}。menuFAQ{background:fff；字体系列：Segoe ui，Calibri，sans serif；字体大小：2em}。menuFAQ ul{列表样式类型：无；位置：相对；margin left:-40px}。menuFAQ li{显示：内联块；页边距顶部：10px；页边距底部：10px；宽度：49%；背景：fff；行高：80px；文本对齐：居中；框阴影：2px 3px 4px 0 RGBA170170170,1}.menuFAQ li a{显示：块；颜色：020602；背景：fff；文本装饰：无}.menuFAQ li.active，.menuFAQ li:hover a{color:fff；背景：linear-gradient90deg，rgba2,0,98,10，rgba89120167,150%}:target{color:fff；font size:1em}div.items>div:not:target{display:none}div.items>div:target{display:block；margin left:auto；margin right:auto；color:000；border:1px solid-aaa}

---

解释TypeA[…]的长而可变的文本大小解释TypeB[…]的长而可变的文本大小下面是如何使用javascript跟踪活动状态

const allTargetLinks=document.queryselectoral'.target' AllTargetLink.forEachtargetLink=>{ targetLink.addEventListener'click'，=>{ AllTargetLink.forEachtargetLink=>{ targetLink.classList.删除“活动” } targetLink.classList.add'active' } } 正文，html{margin left:auto；margin right:auto；width:70%}。menuFAQ{background:fff；字体系列：Segoe ui，Calibri，sans serif；字体大小：2em}。menuFAQ ul{列表样式类型：无；位置：相对；margin left:-40px}。men uFAQ li{显示：内联块；页边距顶部：10px；页边距底部：10px；宽度：49%；背景：fff；行高：80px；文本对齐：居中；方框阴影：2px 3px 4px 0 RGBA170170170,1}。menuFAQ li a{显示：块；颜色：020602；背景：fff；文本装饰：无}。menuFAQ li.活动，.menuFAQ li:悬停a{color:fff；背景：linear-gradient90deg，rgba2,0,98,10，rgba89120167,150%}:target{color:fff；font size:1em}div.items>div:not:target{display:none}div.items>div:target{display:block；margin left:auto；margin right:auto；color:000；border:1px solid-aaa}

---

解释类型A[…]的长而可变的文本大小解释类型B[…]的长而可变的文本大小当你点击链接时，焦点移动到目标div。因此，你无法单独使用CSS来实现这一点。嗯，我理解-这是逻辑。谢谢。当你点击链接时，焦点移动到目标div。因此，你无法单独使用CSS来实现这一点。嗯，我理解-这是逻辑。谢谢。谢谢你很抱歉我的英语不好。是的，这正是你所理解的。并且指定的链接可以满足我的需要！我会尝试！希望上面的脚本可以帮助：PI尝试了链接，但有相同的问题：无法更改所选项目的样式。我想我真的必须使用javascript或jquery。ksav编写了一个可用的脚本。谢谢r谢谢你的帮助。谢谢你，抱歉我的英语不好。是的，这正是你所理解的。所指示的链接可以满足我的需要！我会尝试！希望上面的脚本可以帮助：PI尝试了链接，但有同样的问题：无法更改所选项目的样式。我想我真的必须使用javascript或jquery。ksav编码了一个现成的script正在工作。谢谢你的帮助。谢谢：工作-我把你的代码放在末尾。这：当我不需要更改所选按钮或其他类似元素时，目标策略很好…谢谢你ksav。我做了，但我没有足够的声誉-现在我…我真的很感谢你的帮助谢谢你：工作-我把你的代码在结尾。这是：当我不需要更改所选按钮或其他类似元素时，目标策略是好的…谢谢你ksav。我做了，但我没有足够的声誉-现在我有了…我真的很感谢你的帮助