我认为这会很容易,所以我确信我错过了一些简单的东西。我有一个按钮,我正试图在我的网站上样式。这是用来设置样式的css。
button.popmake-contact-us {
display: inline-block;
height: 50px;
line-height: 50px;
padding-right: 30px;
padding-left: 30px;
position: relative;
font-family: 'Special Elite', 'Inconsolata', 'Droid Sans', serif!important;
font-size: 20px;
background-color: rgb(247, 210, 104);
color: rgb(255,255,255);
text-decoration: none;
text-transform: uppercase;
border-color: #EDE5B1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";
zoom: 1;
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: -2px -2px 0px rgba(95, 91, 77, 0.13);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);}
.contact_popup_button {position: fixed;bottom: 0px;right: 0px;z-index: 9999;}
这是按钮的HTML。
<footer>
<!--copyright info-->
<p class="footer-copyright">© Copyright 2015 | Sporting Life Bar . All Rights Reserved. </p>
<!--Form Submission Button-->
<div class="contact_popup_button" style="cursor: pointer;"><button class="popmake-contact-us" style="cursor: pointer;">Contact Us</button></div>
我可以在Chromes-Inspeciton工具中练习它的样式,但一旦我将它添加到子主题中的style.css文件中。。它返回到默认样式。我不明白它为什么这么做!
如果你想看一看的话,我已经在舞台上直播了有问题的网站。http://staging.sportinglifebar.com/
该按钮位于网站的右下角。祈祷有人能帮我指明正确的方向!
如果有帮助的话,我会使用wordpress插件"Popup Maker"来设计表单的样式并创建弹出窗口。您必须为按钮定义一个类才能激活弹出窗口。
您的选择器中有一个错误
.popmake-contact-us input[type="button"] {
font-family: helvetica;
color: #666666;
font-size: 12px;
border:3px solid;
border-color: #000;
}
将使用popmake-contact-us
的父类查找type=按钮的输入
所以你想要的是一个带有类的按钮
button.popmake-contact-us{ ..style..}