与 a.selected 执行相同效果的 css 命令，但用于 <p>答案

【问题标题】：css command that does the same effect as a.selected, but for a <p>与 a.selected 执行相同效果的 css 命令，但用于 <p>
【发布时间】：2014-05-02 04:01:50
【问题描述】：

我希望我的p 在单击时立即改变颜色，并在单击另一个p 时恢复为原始颜色。不知何故，它是针对a href 的列表完成的，您可以在其中使用命令a.selected。

p 可以这样做吗？以及如何？

谢谢。

【问题讨论】：

点击一个链接不会给它一个选定的类。这是通过 JavaScript 或服务器端代码完成的。您必须为该段落做类似的事情。
您的意思是a:selected 而不是a.selected？前者使用动态伪类，后者按类匹配，而不是动态匹配（除非你有动态改变类的 JavaScript 代码）。
糟糕，抱歉，没有:selected 伪类；我将此与:focus 混淆了。

标签： css hover href selected

【解决方案1】：

通常，p 元素是不可选择的，但在现代浏览器上，通过 HTML5 CR，您可以通过为其分配一个正的 tabindex 值来使其可选择。然后单击这样的元素将对其设置焦点，并且它将匹配:focus 伪类。示例：

<style>
p:focus { color: red; outline: none }
</style>
<p tabindex=10>Hello world!
<p tabindex=20>Hi again.
<p tabindex=30>The end.

包含outline: none 声明，因为没有它，浏览器将在元素周围绘制某种焦点矩形。当然如果你想要那个矩形（在不同的浏览器中是不同的），省略这个声明或者修改它。

【讨论】：

【解决方案2】：

你能不能只给你的<p> 一个类并使用:hover 来改变它的颜色？

EXAMPLE

【讨论】：

悬停是不够的，当我单击并将鼠标移开时，我希望它保持绿色（在你的情况下）..