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僞元素顯示在單獨的元素之一，但不能同時

回答

相關問題