Question

I'm hooking into an action and adding some HTML to the function, but I can't seem to be able to style the 'a' tag like I want to. I'm trying to create a clickable button, and so I thought I'd just make it a link and then style it with CSS, but I can't get my CSS to target the tag.

Here's the HTML:

echo '<a href="www.casthorndesigns.com/wp-login.php?action=register" class="reg_btn">Register/Login</a>';

And the CSS:

.reg_btn a{
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   width: 200px;
   height: 45px;
   border: 2px solid #000;
   background-color: #fff;
   text-decoration: none;
   color: #000 !important;
}

.reg_btn a:hover{
   cursor: pointer;
}

Is the default theme's 'a' tag just overriding my code? I even tried !important out of desperation and couldn't get it to work. Any help would be great, thanks.

Answer 1

您应该在CSS代码中使用该类的名称，如下所示：

.reg_btn {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   width: 200px;
   height: 45px;
   border: 2px solid #000;
   background-color: #fff;
   text-decoration: none;
   color: #000 !important;
}

.reg_btn:hover{
   cursor: pointer;
}

Answer 2

从选择器中删除a。 .reg_btn已经是一个有问题的元素的类，足以单独使用该选择器。

Answer 3

您的CSS定位于reg_btn类中的锚元素。

移动＆＃39; a＆＃39;到选择器的开头或完全删除它。

a.reg_btn { }

或

.reg_btn { }

不能设置<a> tag in WordPress

3 个答案: