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

Question

在 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"/>

我找到了关于此的其他帖子，但它们都是几年前的了。另外，我知道关注点分离和使用外部样式表。这是一个原型(prototype)工具。当用户发布时，CSS 将被分离出来。

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

Answer 1

使用内联样式属性:

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