如何将伪类选择器应用于元素

Question

我自己可以应用我的psuedo级风格吗？

例如，考虑：

button {
  color:#fffff;
}
button:hover {
  color:#ddddd;
}

是否有可能适用＆＃39;在这个例子中的悬停伪类，即使用户没有悬停在它上面，样式也会适用？概念上类似于：

<div class='button:hover'></div>

约束条件是无法复制粘贴悬停样式，也无法对其进行编辑。

有可能这样做吗？ （顺便说一句，我也使用SASS）

Answer 1

因为你说可以在元素中添加新类。 添加一个类.btn-hover并使用以下样式。

.btn-hover{
color:#ddddd !important;
}

这里!important是修改它覆盖所有现有样式的样式的关键

希望这有帮助！

Answer 2

如果您希望能够在运行时添加伪类选择器，以便您可以编辑给定伪元素的CSS样式规则，那么以下内容将起作用。

结束目标。像这样复制并粘贴伪元素规则。

Sidenote 如果您有权访问样式表，那么上面有一条关于您为什么要这样做（如果这是OP想要的）的评论。即使您可以访问样式表，找到您尚未编写的样式，甚至已经编写并忘记了这种样式可能会很痛苦。你必须搜索.parent div：hover，但你可能不知道，并且你的页面上可能会有很多div：hover规则使搜索变得很痛苦。

铬

开发工具
如果您正在使用Chrome，则可以启动Chrome开发工具ctrl + shift + i，或者如果您使用的是cmd + { {1}} + shift。然后在chrome检查器的元素选项卡上右键单击元素，单击force element state然后单击：hover，您应该能够在样式选项卡的右侧切换悬停状态。

在Chrome中，还有另一种选择，您可以按照与之前相同的方式选择元素，然后转到右侧的“样式”标签，然后点击“切换元素状态”。并且您可以切换给定元素的伪类。

火狐

<强>检查

右键单击元素，最好是要设置伪元素的元素。导航到检查器选项卡，右键单击要编辑伪元素规则的元素，然后切换所需的伪元素。然后，您可以转到规则选项卡并编辑您认为合适的样式。

<强>萤火虫

右键单击元素，然后选择使用Firebug进行检查。打开HTML选项卡，左键单击应用了CSS伪类规则的元素，然后转到样式选项卡（右侧）。单击样式选项卡的下拉列表，然后选择要切换的伪元素。您现在可以在样式选项卡中查看css伪类规则，并进行编辑。

当您点击其他元素时，Firefox的检查员将切换悬停状态元素。它甚至可以在右键单击元素时执行此操作，因此如果要在不同元素上设置多个伪类，我建议使用Chrome或Firebug。另一方面，Chrome和Firebug将继续保持悬停状态，直到您再次打开菜单并重新单击强制元素状态将其切换回来：悬停。这将允许您编辑悬停状态样式规则以及从样式选项卡复制它。如果要覆盖现有的悬停状态规则，则需要复制并粘贴已应用的样式规则，并将样式表移动到规则正在重新生成的样式表下方，或者将规则修改为具有更高的specificity。