html - CSS :before pseudo element displays one but not both on separate elements

Question

我试图在 WordPress 侧边栏小部件中的某些元素之前显示一些 FA 图标，我在这方面取得了不同程度的成功。我的目标是两个单独的元素，一个或另一个将显示图标，但不会同时显示。在给定的代码中，第一个实例是正在显示的实例。

如有任何反馈，我将不胜感激!这是我的 CSS:

    #recent-comments-2 li,
    .widget_recent_entries li {
      padding-left: 1.2em;
      margin-bottom: 7px;
    }
    .widget_recent_entries li:before {
      font-family: FontAwesome;
      content: "\f040";
      display: inline-block;
      width: 1.2em;
      margin-left: -1.2em;
    }
    #recent-comments-2 li:before {
      font-family: FontAwesome;
      content: "\f075";
      display: inline-block;
      width: 1.2em;
      margin-left: -1.2em;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<li id="recent-posts-2" class="widget-container widget_recent_entries">
  <h3 class="widget-title">Recent Posts</h3>	
  <ul>
    <li>
      <a href="#">16OCT15</a>
    </li>
    <li>
      <a href="#">15OCT15</a>
    </li>
    <li>
      <a href="#">14OCT15</a>
    </li>
    <li>
      <a href="#">13OCT15</a>
    </li>
  </ul>
</li>

<li id="recent-comments-2" class="widget-container widget_recent_comments">
  <h3 class="widget-title">Recent Comments</h3>
  <ul id="recentcomments">
    <li class="recentcomments"><span class="comment-author-link">Bob</span> on <a href="#">16OCT15</a>
    </li>
    <li class="recentcomments"><span class="comment-author-link">Bill</span> on <a href="#">16OCT15</a>
    </li>
    <li class="recentcomments"><span class="comment-author-link">Bob</span> on <a href="#">15OCT15</a>
    </li>
    <li class="recentcomments"><span class="comment-author-link">Bill</span> on <a href="#">15OCT15</a>
    </li>
    <li class="recentcomments"><span class="comment-author-link">Bill</span> on <a href="#">Random Post</a>
    </li>
  </ul>
</li>

Answer 1

我让它工作了，但我仍然不确定为什么 - 只需将这两个规则与它们之间的另一个规则分开就可以了。这些都没有冲突的 CSS 规则，但这解决了我的问题。问题是这样解决的:

#recent-comments-2 li,
.widget_recent_entries li  {
    padding-left: 1.2em;
    margin-bottom: 7px;
}

.widget_recent_entries li:before {
    font-family: FontAwesome;
    content: "\f040";
    display: inline-block;
    width: 1.2em;
    margin-left: -1.2em; 
}​

#footer {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    clear:both;
    text-align: center;
    background-color: #242424;
    padding-top: 5px;
    border-top: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 0 7px #323232;
    margin-top: 35px;
    } 

#recent-comments-2 li:before {
    font-family: FontAwesome;
    content: "\f075";
    display: inline-block;
    width: 1.2em;
    margin-left: -1.2em;
}​