0

我正在摆弄一个 Wordpress 网站，并为首页号召性用语创建了一个名为 .email 的元素类。

当我使用 .class 作为选择器时，我所做的更改并没有通过。不过，当我在 Chrome 上使用检查元素时，它们会这样做。

据我所知（我不是开发人员），我可以简单地使用 .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

4 回答 4

2

课程在那里，但没有显示任何样式。这可能意味着拼写错误，或者只是样式不存在。

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

于 2013-06-07T16:58:46.447 回答
1

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

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
于 2013-06-07T17:00:16.507 回答
1

尝试 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，因为它对我来说更直接，但它可能并不总是最好的解决方案。

于 2013-06-07T17:07:19.967 回答
0

您必须选择它：

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

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

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

所以对于浏览器来说，使用这种风格比仅仅使用 .email 更重要

于 2013-06-07T17:02:53.470 回答