Question

我正在摆弄Wordpress网站并为首页号召性用语创建了一个名为.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;
    }

Answer 1

班级在那里，但没有出现任何样式。这可能意味着一个错字或只是风格不在那里开始。

一旦样式显示在检查器中，请确保具有更高特异性的选择器不会覆盖您的样式。如果是，你必须使你的选择器比覆盖它的更具体。

Answer 2

这是问题所在！您在媒体查询中使用了样式。这就是为什么它不起作用。您必须关闭媒体查询块才能使其正常工作。

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 block

Answer 3

尝试 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>

我个人喜欢在课堂上使用ID，因为它对我来说更直接，但它可能并不总是最好的解决方案。

Answer 4

你必须选择：

#front-text-feature .front-call-to-action .email { 
  some style here
}

这是因为在CSS中更具体的选择器更重要。在您当前的代码中，.email链接的样式为：

#front-text-feature .front-call-to-action a {
  styling code 
}

因此，浏览器使用此样式比仅使用.email

更重要

选择器麻烦

4 个答案: