在 HTML 标记样式中“{...}{:active ...} 不起作用？

Question

我卡住了，因为我尝试了很多不同的组合，我不知道为什么这不起作用。

WordPress woocommerce 退房 从（提交）返回按钮 带有style="{} :active{}"的表单提交按钮标签

我没有头可以存储 css，只有一个带有表单的模板。 提交已经在主 style.css 中预先设置了样式。 我只想设计两个按钮“支付”和“返回”，而不是所有按钮。 我将完整的 css 放在按钮的 html 中，这是工作除了 :active 这不起作用

<table width="100%"><tr><td width="23%"><input type="submit" class="button alt" name="woocommerce_checkout_update_totals" id="place_order" value="<?php _e( 'back', Woocommerce_German_Market::get_textdomain() ) ?>" style="{position: relative;color: rgba(255,255,255,1);text-decoration: none;background-color: rgb(248, 1, 8);font-weight: bold;display: block;padding: 18px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: 0px 9px 0px rgb(179, 6, 1), 0px 9px 25px rgba(0,0,0,.7);-moz-box-shadow: 0px 9px 0px rgb(179, 6, 1), 0px 9px 25px rgba(0,0,0,.7);box-shadow: 0px 9px 0px rgb(179, 6, 1), 0px 9px 25px rgba(0,0,0,.7);margin: 2px 0px 25px 0px;text-align: center;-webkit-transition: all .1s ease;-moz-transition: all .1s ease;-ms-transition: all .1s ease;-o-transition: all .1s ease;transition: all .1s ease; font-size: 1.387em;} :active {-webkit-box-shadow: 0px 3px 0px rgb(179, 6, 1), 0px 3px 6px rgba(0,0,0,.9);-moz-box-shadow: 0px 3px 0px rgb(179, 6, 1), 0px 3px 6px rgba(0,0,0,.9);box-shadow:0px 3px 0px rgb(179, 6, 1), 0px 3px 6px rgba(0,0,0,.9);position: relative;top: 6px}" /></td>
<td width="77%"><div align="center">something maybe a button</div></td>
</tr>

Answer 1

style 属性中的语法不正确。

使用style="property: value; ..." 而不是style="{}"

因此，在您的情况下，它将是：

<div style="width:50px; height:50px; background:blue;"></div>

我建议避免所有内联样式，而是将逻辑移到样式表中：

.active {
  width: 50px;
  height: 50px;
}

Answer 2

样式属性应该只包含 CSS 声明。它不应包含样式表中围绕它们的{}。

没有办法在样式属性中包含选择器，您需要为此使用常规样式表。

Answer 3

在标题中添加

<style type='text/css'>
input :active {
-webkit-box-shadow: 0px 3px 0px rgb(179, 6, 1);
//... what ever you have put for active 
}
</style>

试试吧。