與給定

類

不是第一要素，我有一些這樣的代碼：與給定

<span class="item multifilter-wrapper multifilter"> 
    <span class="item multifilter multifilter-item"> 
    <div></div> 
    </span> 
    <span class="item multifilter multifilter-item"> 
    <div></div> 
    </span> 
    <span class="item multifilter multifilter-item hasdata"> 
    <div>HELLO</div> 
    </span> 
</span>

任何multifilter-item跨度可以有內容，如果有內容我添加hasdata類，在最後一個項目。

我想加入一個分離器中跨距2 multifilter-item之間的情況下，有一個以上的數據，所以有這樣的BEFORE規則：

.multifilter-wrapper .hasdata:not(:first-child)::before{ 
    content: '|'; 
}

然而，可以添加在上述的例子中的內容僅有1 hasdata跨度。

任何想法爲什麼？

來源

2015-08-20 Rafa Llorente

你能寫出不同情況的輸出嗎？它可以幫助我認爲 –

另外，'span'元素不能包含'divs' ...這是無效的HTML。 –

[這是一個很好的答案]（http://stackoverflow.com/a/8539107/838807）對於一個非常類似的問題（先選擇，而不是先選擇） – musefan

，而不必修改您的標記，你可以使用一般的兄弟選擇：~（http://www.w3.org/TR/css3-selectors/）

http://jsfiddle.net/ossx1v1k/

.multifilter-wrapper .hasdata ~ .hasdata::before{ 
    content: '|'; 
}

請注意，我已經從span標籤中取出div標籤在我的jsfiddle示例中，因爲Paulie_D指出，在內聯塊中包含塊元素是無效的標記。

來源

2015-08-20 10:35:30 Luca

這對我來說很重要，非常感謝！ –

這是因爲.has-data不是第一個孩子，所以它與預期相符。

我覺得你很困惑:first-child做什麼。它會檢查它的父母是否爲第一個子元素元素（它不像之前的其他2個元素）。它確實不是檢查它是否是第一個也是.hasdata類的孩子。

基本邏輯是：

類是hasdata
和不是第一個子元素

與它匹配這些規則，這就是爲什麼內容分離器添加。

沒有辦法確定只有CSS中具有特定類名的第一個子類，但不能爲「不是第一個hasdata類」編寫規則。我建議你修改html，使其具有像notfirsthasdata這樣的內容來標識不是第一個包含內容的元素。

有first-of-type這是你想要的邏輯類型，但我相信這隻能匹配元素類型（在你的案例span）而不是類名稱。

來源

2015-08-20 10:19:28 musefan

回答

相關問題