为什么我的CSS类样式不适用于特定的< li> [英] Why is my CSS Class style not applying to specific <li>'s?

问题描述

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

Answer: This was a dumb mistake, was using '//' for single line comments instead of wrapping in /**/ (been writing too much javascript lately) Thanks for help, sorry for wasting time.

我不知道为什么这个CSS不仅仅适用于某些li的..

I cannot figure out why this CSS is not applying only to certain li's..

这里是CSS：评论它说什么和不适用 - 这是奇怪的，因为Facebook链接确认父类li的类'后面'，并应用链接颜色，但实际的li不识别编辑或Facebook上的类

Here is the CSS: (notice the comments it says what does and doesn't apply - it is strange because the facebook link does recognize the class 'post-face' of the parent li and applies the link color but the actual li is not recognizing the class on the edit or facebook li's but it does on the twitter and comment li with the exact same code)

.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-->

推荐答案

此规则指向错误的图标： p>

This rule is pointing to the wrong icon:

.SL .post .post-det .post-face {
    background: url(images/post-tweet-icon.png) no-repeat left 2px;
}

images / post-tweet-icon.png 应该可能是 images / post-face-icon.png 。

另一个... edit_post_link（）函数生成的确切HTML是什么？

Not sure about the other one... what's the exact HTML that's generated by the edit_post_link() function?

这篇关于为什么我的CSS类样式不适用于特定的< li>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！