CSS：before伪元素显示在单独的元素之一，但不能同时

我想之前在WordPress的侧边栏小工具的一些项目&我已经受够了这种混合的成功显示一些FA图标。我针对两个单独的项目&其中一个或另一个将显示图标，但不是两者。在给出的代码中，第一个实例是正在显示的实例。CSS：before伪元素显示在单独的元素之一，但不能同时

我会很感激任何反馈！这里是我的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> \t 
 
    <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>

来源

2015-10-17 Jeff W

你能告诉我们你的标记html或做一个jsfiddle –

我们肯定需要看到的HTML。请编辑你的问题，并使用这里的“代码片段”功能，而不是使用JSFiddle。 – rnevius

好人 - 添加了HTML！ –

我得到它的工作，但我仍然不知道为什么 - 只需在它们之间使工作另一个规则分隔两个规则。没有任何冲突的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; 
}

来源

2015-10-17 17:54:17

CSS：before伪元素显示在单独的元素之一，但不能同时

回答

相关问题