Question

可能重复：
Why is my CSS Class style not applying to specific <li>'s?

答案：这是一个愚蠢的错误，使用'//'进行单行注释而不是包装在/ ** /（最近写了太多javascript）感谢您的帮助，抱歉浪费时间。

我无法弄清楚为什么这个CSS不适用于某些li ..

这是CSS :(注意它说的内容有什么不适用 - 这很奇怪因为facebook链接确实识别了父li的类'post-face'并且应用了链接颜色但是实际li没有在编辑或facebook li上识别课程，但它在推特上发表并且用完全相同的代码评论li）

.SL .post .post-det .post-tweet {
    /* DOES APPLY */
    background: url(images/post-tweet-icon.png) no-repeat left 2px;
}
.SL .post .post-det .post-tweet a { color:#008ebc; } /* DOES APPLY */

/* FACEBOOK SHARE ADDON */
.SL .post .post-det .post-face {
    /* THIS DOESN'T APPLY */
    background: url(images/post-tweet-icon.png) no-repeat left 2px;
}
.SL .post .post-det .post-face a { color:#A1A1A0; } /* THIS DOES APPLY */
/* END FACEBOOK SHARE ADDON */

.SL .post .post-det .post-edit {
    /* THIS DOESN'T APPLY */
    background: url(images/post-edit-icon.png) no-repeat left 2px;
}
.SL .post .post-det .post-edit a { color:#ff0000; } /* THIS DOES APPLY */

这是HTML：

<!--start of Latest Posts-->
<div class="latest">
<span class="toptitle"><strong>Latest Post</strong></span>

<div id="post-89" class="post indexpost">
<div class="post-head">
 <div class="post-date">July 6, 2011</div>
  <h2><a href="http://website.com/geo/?p=89" title="Permalink to Get in Touch" rel="bookmark">Get in Touch</a></h2>
 </div>
    <div class="post-con"><p>Geothermal Solutions is proud to serve the Ontario geothermal market for over 5 years installing over 2000 residential systems. We work for HVAC contractors across Ontario. </p> 
<p><a href="http://website.com/geo/wp-content/uploads/2011/07/residential.jpeg"><img class="alignnone size-medium wp-image-112" title="residential" src="http://website.com/geo/wp-content/uploads/2011/07/residential-300x199.jpg" alt="" width="300" height="199" /></a></p> 
<p>With our knowledge and expertise you can have confidence in the loop that is going into the ground and rely on Geothermal Solutions to have it completed in a timely and professional manner. </p> 
<p>We work for many of the major residential ground source installers in Ontario today which trust us for our reputation and quality work they can depend on.</p> 
</div>
 <ul class="post-det">
    <li class="post-tag"><span class="entry-utility-prep entry-utility-prep-tag-links"></span> <a href="http://website.com/geo/?tag=geothermal" rel="tag">geothermal</a> | <a href="http://website.com/geo/?tag=geothermal-energy" rel="tag">geothermal energy</a> | <a href="http://website.com/geo/?tag=green-2" rel="tag">green</a> | <a href="http://website.com/geo/?tag=residential" rel="tag">residential</a></li>
    <li class="post-comment"><a href="http://website.com/geo/?p=89#respond" title="Comment on Get in Touch">Leave a comment</a></li>
<li class="post-tweet"><a href='http://twitter.com/share' class='twitter-share-button' data-url='http://website.com/geo/?p=89' data-text='Get in Touch' data-count='vertical'>Tweet This !</a></li>

  <li class="post-face"><a href='http://facebook.com' class='twitter-share-button' data-url='http://website.com/geo/?p=89' data-text='Get in Touch' data-count='vertical'>Share This !</a></li>  
  <li class="post-edit"><a class="post-edit-link" href="http://website.com/geo/wp-admin/post.php?post=89&amp;action=edit" title="Edit Post">Edit</a></li>  </ul>
 </div>
<!--End of Post -->

</div>
<!--end of Latest Posts-->

Answer 1

在这些将背景设置为无的行后，你的CSS文件中是否有任何内容？如果您有Firebug或Chrome，则可以看到该元素应用了哪种样式。

Answer 2

试试这个：

.SL .post .post-det .post-tweet {
    /* DOES APPLY */
    background: url(images/post-tweet-icon.png) no-repeat left 2px;
}
.SL .post .post-det .post-tweet a { color:#008ebc; } /* DOES APPLY */

    /* FACEBOOK SHARE ADDON */
    .SL .post .post-det li.post-face {
        /* THIS DOESN'T APPLY */
        background: url(images/post-tweet-icon.png) no-repeat left 2px !important;
    }
    .SL .post .post-det .post-face a { color:#A1A1A0; } /* THIS DOES APPLY */
    /* END FACEBOOK SHARE ADDON */

    .SL .post .post-det li.post-edit {
        /* THIS DOESN'T APPLY */
        background: url(images/post-edit-icon.png) no-repeat left 2px !important;
    }
    .SL .post .post-det .post-edit a { color:#ff0000; } /* THIS DOES APPLY */

为什么我的CSS类样式不适用于特定的<li>？</li>

2 个答案: