CSS :在伪元素之前在单独的元素上显示一个，但不是两个都显示

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;
}​