Question

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

WordPress的 woocommerce 查看从（提交）后退按钮使用style="{} :active{}"

表单提交按钮标记

我没有头脑可以存储css，只是一个带有表单的模板。提交已在主style.css中预先设置样式。我只想设置两个按钮“Pay”和“back”，而不是所有按钮。我把完整的CSS放在按钮的html中，这是有效的：活动这不起作用

<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属性应仅包含CSS声明。它不应该包含样式表中围绕它们的{}。

无法在样式属性中包含选择器，您需要使用常规样式表。

Answer 2

style属性中的语法不正确。

使用style="property: value; ..."代替style="{}"

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

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

我建议避免使用所有内联样式将该逻辑转换为样式表：

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

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>

尝试。

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

3 个答案: