wordpress中单个条目的自定义css答案

【问题标题】：Custom css for a single entry in wordpresswordpress中单个条目的自定义css
【发布时间】：2016-02-25 08:59:58
【问题描述】：

我正在为 wordpress 网站上的 facebook 活动设计登陆页面。这不是我自己的网站，我不想在设置登录页面样式时更改整个网站的通用 CSS。因此，如果有意义的话，我会在该条目的文本编辑器中为我的条目的所有元素设置样式。

当人们点击 facebook 上的链接时，他们会进入我正在制作的页面。基本上，该页面应包含两个按钮，可将人们进一步重定向到页面上。我设计了两个锚标签，比如方形按钮，到目前为止都很好，但要真正获得“可点击”的感觉，我希望在 a 标签悬停时改变背景。

这是我创建按钮的方式：

<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>

<a class="blue" style="background-color: #35a8e0; display: inline-block; 
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>

如果我有一个样式表，我可以用另一种背景颜色设置a:hover 的样式，我就完成了，但是由于我正在为页面上的各个元素设置样式，所以我不知道如何设置:hover 属性的样式style="" 中的元素。

如何在 html 中设置 html 元素的 :hoverproperty 样式？或者有没有办法在 wordpress 的条目内创建样式表？

我尝试将其添加到条目中，但没有成功：

<style media="screen" type="text/css">
.green a:hover {background-color: #799f34;}
.blue a:hover {background-color: #2c8cba;}
</style>

有人能指出我正确的方向吗？谢谢！

【问题讨论】：

标签： html css wordpress

【解决方案1】：

您需要在 CSS 规则中添加 !important 以直接在 HTML 中覆盖背景颜色。

a:hover.green  {background-color: #799f34!important;}
a:hover.blue {background-color: #2c8cba!important;}

如果 OP 想要 在 HTML 中而不是在 CSS 中，我发现了一些示例：exaple one 和 related post

【讨论】：

伙计们，我猜 OP 想找出在不创建子主题和编辑原始主题文件的情况下编辑伪样式的方法
a:hover.green你确定在这个selector

【解决方案2】：

我认为您应该将这些代码放在任何其他block/ div 中，这样可以将这个页面与页面的其余部分区分开来。我为您的代码创建了一个 sn-p，这将为您清除所有内容。

#land-pg .green:hover {background-color: #799f34 !important;}
#land-pg .blue:hover {background-color: #2c8cba !important;}

<div id="land-pg">

<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>

<a class="blue" style="background-color: #35a8e0; display: inline-block; 
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>

</div>
ANOTHER SAME DIV BELOW which are not affected
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>

<a class="blue" style="background-color: #35a8e0; display: inline-block; 
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>

【讨论】：