選擇第n個孩子跳過隱藏的元素

我正在尋找只有CSS（無JS）的方式來忽略第n個孩子計數中的隱藏元素。這可能嗎？選擇第n個孩子跳過隱藏的元素

我有了這個HTML：

<div class="gallery-item"><img src="http://placehold.it/150x150"></div> 
<div class="gallery-item"><img src="http://placehold.it/150x150"></div> 
<div class="gallery-item empty"></div> 
<div class="gallery-item"><img src="http://placehold.it/150x150"></div> 
<div class="gallery-item empty"></div> 
<div class="gallery-item"><img src="http://placehold.it/150x150"></div> 
<div class="gallery-item"><img src="http://placehold.it/150x150"></div>

我努力的目標每秒庫項目，是不是空的，但是這不是工作：

.gallery-item:not(.empty):nth-child(2n) {}

我不想使用JS，因爲這是一個複雜的網站，有很多斷點，我不想爲這些基本的東西添加onresize監聽器。

來源

2015-07-02 fuzzyvagina

據我所知，這是不可能的CSS，因爲'nth-child（2n）'會指向每個第二個孩子，如果它也有gallery-item類但不是空類，它會得到樣式。 – Harry

啊，對於那個錯字錯誤感到抱歉。沒有注意到:( – Harry

您必須使用下面的代碼爲目標的第二項

.gallery-item:not(.empty):nth-child(2) { //not :nth-child(2n) 
    background:#ddd 
}

鏈接JSFIDDLE

來源

2015-07-02 10:22:10

問題狀態*指定每個第二個圖庫項目不是空的*而不僅僅是第二個項目。 – Harry

這可能是一個零後，因爲它使用JS。但在這種情況下，它似乎只是一個選擇。你不想使用JS，我知道。但就沒有一個帶有CSS唯一的解決辦法，至少可以這樣考慮：http://codepen.io/zvona/pen/jPZYNx

var galleryItems = document.querySelectorAll('.gallery-item:not(.empty)'); 

[].forEach.call(galleryItems, function(item, i) { 
    item.classList.toggle('notEmptyAndEven', i % 2) 
});

，然後只需添加.notEmptyAndEven選擇你需要的CSS規則。

來源

2015-07-02 11:13:56 zvona

選擇第n個孩子跳過隱藏的元素

回答

相關問題