blocks|key|3880863|text|类在那里，但没有显示任何样式。这可能意味着一个打字错误，或者只是样式一开始就不存在。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3880864|一旦样式显示在检查器中，请确保具有更高特异性的选择器不会覆盖您的样式。如果是，你必须使你的选择器比覆盖它的东西更具体。|3880865|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

The class is there, but no styles are showing up. That could mean a typo or just that the styles aren't there to begin with.

Once the styles show up in the inspector, make sure that a selector with higher specificity isn't overriding your styles. If it is, you have to make your selector more specific than what is overriding it.

blocks|key|3880898|text|这是问题所在！您在媒体查询中使用了样式。这就是它不起作用的原因。您必须关闭媒体查询阻止才能使其工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3880899|http://patchwood.ca/wp-content/themes/orbit/style.css?ver=3.5.1|offset|length|3880900|@media+screen+and+(max-width:+400px)+{
++#logo+img+{
++++height:+auto;
++++width:+50%25;
}
.footer-box+{
++++display:+none;
++++}
.email+{
++++font-style:+italic;
++++font-size:+0.8em;
++++}|code-block|syntax|javascript|3880901|固定CSS：|3880902|@media+screen+and+(max-width:+400px)+{
++#logo+img+{
++++height:+auto;
++++width:+50%25;
}
.footer-box+{
++++display:+none;
++++}
}
.email+{
++++font-style:+italic;
++++font-size:+0.8em;
}|3880903|编辑：|3880904|同时关闭max-width:600px的媒体查询区块|style|CODE|3880905|@media+screen+and+(max-width:+600px)+{
++/*+responsive+menu*/
++.main-nav+{
++++display:+none;
++}
++.tinynav+{
++++width:+100%25;
++++display:+block;
++}
++.search-page+{
++++width:+100%25;
++}
++#logo,
++#main-navigation,
++#content,
++aside,
++.footer-box,
++.footer-copy,
+++.footer-credit,
++#front-text-feature+{
++++display:+inline;
++++float:+left;
++++width:+97.91666666666666%25;
++++margin:+0+1.0416666666666665%25;
++}
++.footer-box+{
++++width:+90%25;
++++margin:+0+5%25;
++}
++#front-slide,
++.front-box+{
++++display:+inline;
++++float:+left;
++++width:+97.91666666666666%25;
++++margin:+0+1.0416666666666665%25;
++++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|3880906|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1R|0|0|0|0|0|0|4|F|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|19|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|1A|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1C|8|@$D|1D|E|1E|S|T]]|9|@]|A|$]]|$1|U|3|V|5|H|7|1F|8|@]|9|@]|A|$I|J]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|C]]]]

Here's the issue! You used styles inside media queries. That is why it isn't working. You must close media queries block in order to make it work.

<a href="http://patchwood.ca/wp-content/themes/orbit/style.css?ver=3.5.1" rel="nofollow">http://patchwood.ca/wp-content/themes/orbit/style.css?ver=3.5.1</a>

<pre><code>@media screen and (max-width: 400px) {
 #logo img {
 height: auto;
 width: 50%;
}
.footer-box {
 display: none;
 }
.email {
 font-style: italic;
 font-size: 0.8em;
 }
</code></pre>

Fixed CSS:

<pre><code>@media screen and (max-width: 400px) {
 #logo img {
 height: auto;
 width: 50%;
}
.footer-box {
 display: none;
 }
}
.email {
 font-style: italic;
 font-size: 0.8em;
}
</code></pre>

Edit:

Close your media queries block for <code>max-width:600px</code> as well

<pre><code>@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
</code></pre>

blocks|key|3880946|text|您必须使用以下命令选择它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3880947|#front-text-feature+.front-call-to-action+.email+{+
++some+style+here
}|code-block|syntax|javascript|3880948|这是因为在CSS中，更具体的选择器更重要。在您当前的代码中，.email链接的样式为：|3880949|#front-text-feature+.front-call-to-action+a+{
++styling+code+
}|3880950|所以对于浏览器来说，使用这种风格比仅仅使用.email更重要|3880951|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You have to select it with: 

<pre><code>#front-text-feature .front-call-to-action .email { 
 some style here
}
</code></pre>

It's because in CSS more specific selector is more important. In your current code the .email link is styled by:

<pre><code>#front-text-feature .front-call-to-action a {
 styling code 
}
</code></pre>

So it's more important for a browser to use this style than just .email

blocks|key|1702896|text|试试a.email+{++++++font-style:+italic;++++++font-size:+0.8em;++++++}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1702897|我已经有一段时间没有使用css了，但我认为另一种解决方案可能是|1702898|#email+{
font-style:+italic;
font-size:+0.8em;
}|code-block|syntax|javascript|1702899|然后在您的html使用中|1702900|<a+id="email"+href="mailto:gavin.patchwood@gmail.com">gavin.patchwood@gmail.com</a>|1702901|就我个人而言，我喜欢使用is而不是类，因为它对我来说更简单，但它并不总是最好的解决方案。|1702902|entityMap^0|2|1S|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|11|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

Try
 <code>a.email {
 font-style: italic;
 font-size: 0.8em;
 }</code>

I haven't used css in a while but I think another solution may be

<pre><code>#email {
font-style: italic;
font-size: 0.8em;
}
</code></pre>

Then in your html use

<pre><code>&lt;a id="email" href="mailto:gavin.patchwood@gmail.com"&gt;gavin.patchwood@gmail.com&lt;/a&gt;
</code></pre>

I personally like using IDs over the classes because it is more straightforward to me, but it may not always be the best solution.

I'm fiddling with a Wordpress site and created a class of element called .email for the front page call to action.

When I use .class as a selector the changes I make are not coming through. They do when I use inspect element on Chrome though.

To my knowledge (I'm not a developer) I can simply use .someclass and it will select it globally. This does not appear to be working here though.

In choosing what code to display for this question I'm really not sure. The site is here: tinyurl.com/m562wgd

In the very middle of the page there is an email address that I would like to apply styling to but cannot select it with .email.

Here is the html:

<pre><code>&lt;div class="front-call-to-action"&gt;

 &lt;div class="front-button"&gt;

 &lt;a class="phonenumber" href="" &gt;
 Call: 647.832.8626 &lt;/a&gt; 

 &lt;!--20130607 Gavin added email address to CTA --&gt;
 &lt;br /&gt;
 &lt;a class="email" href="mailto:gavin.patchwood@gmail.com"&gt;gavin.patchwood@gmail.com&lt;/a&gt;


 &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

and here is the CSS I was trying with:

<pre><code>.email {
 font-style: italic;
 font-size: 0.8em;
 }
</code></pre>

Trouble with selector

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在摆弄一个Wordpress站点，并为首页的call to action创建了一个名为.email的元素类。当我使用.class作为选择器时，我所做的更改不会生效。不过，当我在Chrome上使用inspect元素时，就会发生这种情况。据我所知(我不是开发人员)，我可以简单地使用.someclass，它会全局选择它。...

问选择器有问题
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选择器有问题EN