选择器有问题
我正在摆弄一个Wordpress站点，并为首页的call to action创建了一个名为.email的元素类。
当我使用.class作为选择器时，我所做的更改不会生效。不过，当我在Chrome上使用inspect元素时，就会发生这种情况。
据我所知(我不是开发人员)，我可以简单地使用.someclass，它会全局选择它。不过，这在这里似乎不起作用。
在选择为这个问题显示什么代码时，我真的不确定。网站在这里: tinyurl.com/m562wgd
在页面的最中间有一个我想要应用样式的电子邮件地址，但无法使用.email选择它。
下面是html：
<div class="front-call-to-action">
<div class="front-button">
<a class="phonenumber" href="" >
Call: 647.832.8626 </a>
<!--20130607 Gavin added email address to CTA -->
<br />
<a class="email" href="mailto:gavin.patchwood@gmail.com">gavin.patchwood@gmail.com</a>
</div>
</div>下面是我尝试使用的CSS：
.email {
font-style: italic;
font-size: 0.8em;
}回答 4
Stack Overflow用户
发布于 2013-06-08 01:00:17
这是问题所在！您在媒体查询中使用了样式。这就是它不起作用的原因。您必须关闭媒体查询阻止才能使其工作。
http://patchwood.ca/wp-content/themes/orbit/style.css?ver=3.5.1
@media screen and (max-width: 400px) {
#logo img {
height: auto;
width: 50%;
}
.footer-box {
display: none;
}
.email {
font-style: italic;
font-size: 0.8em;
}固定CSS：
@media screen and (max-width: 400px) {
#logo img {
height: auto;
width: 50%;
}
.footer-box {
display: none;
}
}
.email {
font-style: italic;
font-size: 0.8em;
}编辑：
同时关闭max-width:600px的媒体查询区块
@media screen and (max-width: 600px) {
/* responsive menu*/
.main-nav {
display: none;
}
.tinynav {
width: 100%;
display: block;
}
.search-page {
width: 100%;
}
#logo,
#main-navigation,
#content,
aside,
.footer-box,
.footer-copy,
.footer-credit,
#front-text-feature {
display: inline;
float: left;
width: 97.91666666666666%;
margin: 0 1.0416666666666665%;
}
.footer-box {
width: 90%;
margin: 0 5%;
}
#front-slide,
.front-box {
display: inline;
float: left;
width: 97.91666666666666%;
margin: 0 1.0416666666666665%;
margin-bottom: 16px;
}
#front-text-feature,
#front-slide {
padding: 12px 0;
}
#front-boxes,
.front-features {
margin-bottom: 24px;
}
.social-icons ul {
margin: 12px 0 12px 0;
text-align: center;
height: auto;
}
.footer-copy {
text-align: center;
}
.footer-credit {
margin-top: 12px;
text-align: center;
}
} //Add this extra blockStack Overflow用户
发布于 2013-06-08 00:58:46
类在那里，但没有显示任何样式。这可能意味着一个打字错误，或者只是样式一开始就不存在。
一旦样式显示在检查器中，请确保具有更高特异性的选择器不会覆盖您的样式。如果是，你必须使你的选择器比覆盖它的东西更具体。
Stack Overflow用户
发布于 2013-06-08 01:07:20
试试a.email { font-style: italic; font-size: 0.8em; }
我已经有一段时间没有使用css了，但我认为另一种解决方案可能是
#email {
font-style: italic;
font-size: 0.8em;
}然后在您的html使用中
<a id="email" href="mailto:gavin.patchwood@gmail.com">gavin.patchwood@gmail.com</a>就我个人而言，我喜欢使用is而不是类，因为它对我来说更简单，但它并不总是最好的解决方案。
https://stackoverflow.com/questions/16989314
复制相似问题
腾讯云开发者
