我知道将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>
...因为这将一直适用，而不是仅在悬停期间适用。
Answers:
恐怕无法完成，伪类选择器无法内联设置，您必须在页面或样式表上进行设置。
我应该提到，从技术上讲，您应该能够按照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。其他人可以在其他任何浏览器中进行测试吗？
style属性的伪元素。
如果仅调试，则可以使用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>
一个简单的解决方案：
<a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>
要么
<script>
/** Change the style **/
function overStyle(object){
object.style.color = 'orange';
// Change some other properties ...
}
/** Restores the style **/
function outStyle(object){
object.style.color = 'orange';
// Restore the rest ...
}
</script>
<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>
我为想要使用onmouseover和onmouseout行为而不使用CSS创建悬停弹出窗口的任何人提供了一个快速解决方案。
<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>
如果该<p>标记是通过JavaScript创建的，那么您还有另一个选择：使用JSS以编程方式将样式表插入文档头。它确实支持'&:hover'。https://cssinjs.org/