Question

我试图在WordPress侧边栏小部件中的某些项目之前显示一些FA图标＆amp;我对此有不同的成功。我定位了两个单独的项目＆amp;一个或另一个将显示图标，但不是两个。在给出的代码中，第一个实例是正在显示的实例。

我很感激任何反馈！这是我的CSS：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: