有没有办法内联设置伪样式、添加嵌套样式标签或嵌套样式或属性？答案

【问题标题】：Is there a way to set pseudo styles inline, add nested style tags, or nested styles or properties?有没有办法内联设置伪样式、添加嵌套样式标签或嵌套样式或属性？
【发布时间】：2014-05-08 19:09:58
【问题描述】：

在 SVG 中你可以做这样的事情（内联伪状态的嵌套样式标签）：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- nested style tag --> 
    <style type="text/css" >
      <![CDATA[

        circle {
           stroke: #006600;
           fill:   #00cc00;
        }
        circle:hover {
           stroke: #FF6600;
           fill:   #00ccFF;
        }

      ]]>
    </style>

    <circle  cx="40" cy="40" r="24"/>
</svg>

你能以某种方式对 HTML 元素做同样的事情吗，例如按钮？

<input type="button" value="Button">

    <style type="text/css" >
      <![CDATA[

        this {
           color: #006600;
        }
        this:hover {
           color: #FF6600;
        }

      ]]>
    </style>

</input>

或嵌套样式标签：

<input type="button" value="Button">
    <style>
       <color>#006600</color>
    </style>
    <style state="hover">
       <color>#FF6600</color>
    </style>
</input>

或内联伪样式：

<input type="button" style="color:#000000" style.hover="#ff6600" value="Button"/>

我在这方面找到了其他帖子，但它们已经有几年历史了。另外，我知道关注点分离和使用外部样式表。这是一个原型工具。当用户发布 CSS 将被分离出来。

附言。仅使用内联而不使用 CSS 是有充分理由的；如果您正在创建 HTML 电子邮件新闻信函，因为 Gmail 现在仅支持内联样式并去除 ID 标签和样式块

【问题讨论】：

标签： html css svg stylesheet

【解决方案1】：

使用内联样式属性：

<div style="width:20px;height:20px;background-color:#ffcc00;"></div>

【讨论】：

我对内联伪样式或内联嵌套样式标签或节点感兴趣，例如 SVG 示例。