Jquery UI（可拖动）阻止Firefox中的活动伪类答案

【问题标题】：Jquery UI (draggable) blocking active Pseudo class in firefoxJquery UI（可拖动）阻止Firefox中的活动伪类
【发布时间】：2016-09-13 12:03:33
【问题描述】：

我在使用以下 css 时遇到了问题。

#keyboard li:active {
        color:red;
}

html 块：

<ul id="keyboard">
           <li id="a"  class="letter">a</li>
           <li id="aA" class="letter">aA</li>
           <li id="ai" class="letter">ai</li>
 </ul>

我试图弄清楚为什么它不能在我的网页中工作，但在其他地方只能使用一些普通的 HTML 和 CSS。

然后我尝试删除我的 jqueryui.js 文件，然后该 css 块工作。如何在不从网页中删除 jqueryui 的情况下解决此问题。

我在加载 jqueryui 后加载我的 css。

更新：

我发现可拖动的方法导致了这个问题。整个列表位于一个 div 中，该 div 使用 jquery 可拖动。我解决了我的问题。

小提琴：https://jsfiddle.net/t96ku5na/

@TJ https://jsfiddle.net/t96ku5na/3/ 提到的评论说它可以正常工作并且已关闭但无法正常工作。

更新：

这个问题似乎是 Firefox 特有的。它在 Chrome 中完美运行。 Firefox 测试版本：45.0.2。

【问题讨论】：

尝试添加color:red !important; 但这不是遵循特异性的好方法...
试过但仍然存在问题
将 !important 添加到您的代码 li:active {color:red !important;}
为你的 li 使用合适的选择器 - 比如 #yourid li:active{your code !important;}
你能告诉我们渲染的html.. ??

标签： jquery html css jquery-ui firefox

【解决方案1】：

我刚刚在 Firefox 中遇到了同样的问题，但 jQuery draggable API 实际上现在提供了一个解决方法。您可以使用类.ui-draggable-dragging 来引用被拖动的元素（即当它被点击时，与伪类:active 相同）。

【讨论】：