我知道将CSS样式直接嵌入到它们会影响的HTML标记中会破坏CSS的许多目的，但有时对于调试目的很有用，例如：

<p style="font-size: 24px">asdf</p>

嵌入规则的语法是什么：

a:hover {text-decoration: underline;}

放入A标签的样式属性中？显然不是这个...

<a href="foo" style="text-decoration: underline">bar</a>

...因为这将一直适用，而不是仅在悬停期间适用。

解决方案

恐怕无法完成，伪类选择器无法内联设置，我们必须在页面或者样式表上进行设置。

我应该提到，从技术上讲，我们应该能够按照CSS规范进行操作，但是大多数浏览器都不支持它

编辑：我只是对此进行了快速测试：

<a href="test.html" style="{color: blue; background: white} 
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

而且它不适用于IE7，IE8 beta 2，Firefox或者Chrome。其他人可以在其他任何浏览器中进行测试吗？

如果仅调试，则可以使用javascript修改css：

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>

如果是用于调试，则只需添加一个css类进行悬停(因为元素可以具有多个类)：

a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>

我也不认为jQuery也支持伪选择器，但它确实提供了一种将事件添加到单个页面上的一个，多个或者所有相似控件和标记的快速方法。

最重要的是，我们可以链接事件绑定，并根据需要在一行脚本中完成所有操作。与手动编辑所有HTML来打开或者关闭HTML相比，它要容易得多。再说一次，由于我们可以在CSS中进行相同的操作，因此我不知道它可以为我们带来任何收益(除了学习jQuery外)。