css - 为什么我的 CSS 类样式不适用于特定的 <li>?

标签 css wordpress class

回答:这是一个愚蠢的错误,使用“//”作为单行注释,而不是用/**/换行(最近写了太多 JavaScript)感谢您的帮助,抱歉浪费了时间。

我不明白为什么这个 CSS 不仅仅适用于某些 li。

这里是CSS:(注意它的注释说了什么适用和不适用 - 这很奇怪,因为facebook链接确实识别了父li的类“post-face”并应用了链接颜色,但实际的li 无法识别编辑或 facebook li 上的类,但它可以在 twitter 上识别并使用完全相同的代码评论 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-->

最佳答案

此规则指向错误的图标:

.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 是什么?

关于css - 为什么我的 CSS 类样式不适用于特定的 <li>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6613028/

相关文章:

css - 居中固定宽度布局,仅一侧具有 100% 填充

php - DOMPDF,第二页表格行高恢复正常

html - WordPress - 需要 CSS 帮助将导航栏与 div 分开

c++ - 如何在 C 中使用 printf 查找对象类型?

html - 将两个 div 放在彼此下方时不需要的滚动条

jQuery 对 Ajax 刷新的影响

css - 使用变换后调整父div的大小: translate on a child tag

html - 从 Excel Embed iFrame 中删除底部栏

wordpress - 如何获得woocommerce国家选择下拉菜单?

python - 将属性添加到类列表以返回具有特定属性的所有对象