斑馬條紋忽略隱藏元素

說我有一個表，其行可以動態分配.hidden類。具有該類的行通過CSS隱藏。該行還鋪有交替的顏色，就像這樣：斑馬條紋忽略隱藏元素

tr:nth-child(even) { 
    background-color: $light-grey; 
}

但是，我想將每一個陰影甚至，取消隱藏行。當應用:nth-child(even)時，隱藏的行不計算在內，並且模式看起來一致。以下是我的直接嘗試，但它沒有達到我所希望的。

tr:not(.hidden):nth-child(even) { 
    background-color: $light-grey; 
}

:nth-child()被簡單地指的是行的原始索引，而不是從tr:not(.hidden)當前選擇範圍。這兩者簡單地通過彼此頂部「過濾」。

在CSS中是否有:nth-of-scope/selection()（或簡單地說是:nth()）meta class？是否有任何等價物或替代方法？

或者我必須使用Javascript嗎？

（我應該說，我也可以使用jQuery）

來源

2014-11-07 Jollywatt

有沒有辦法做到這一點在純CSS如添加display:none或visibility:none不從DOM中刪除，這是什麼CSS元素我簡單的例子使用。

其結果是，你將需要添加一些JavaScript（運行一次頁面加載）要做到這一點，like so

var trs = document.getElementsByTagName("tr"), // Select whichever ones you need 
    count = 0; // Counter for the non-hidden ones 

for(var i = 0; i < trs.length; i++) {  
    if(!trs[i].classList.contains("hidden") && (count++)%2 == 0) { // Odd ones 
     trs[i].style.background = "black"; 
    } else if(!trs[i].classList.contains("hidden")) { // Even ones 
     trs[i].style.background = "lightgrey"; 
    } 
}

來源

2014-11-07 02:59:19

有一個[純粹的CSS方式]（http://stackoverflow.com/a/42013886/3094153） – kornieff 2017-02-02 22:58:14

@kornieff你錯了。你的回答沒有解決問題中提到的問題。 – 2017-02-03 00:03:51

不知道這是可能的純CSS。使用display:none;和visibility:hidden;這些項目仍然存在於DOM中，因此表格背景顏色顯示不正確。你可以這樣使用JQuery remove()工作，你可以看到js.fiddle here

來源

2014-11-07 00:53:36 crazymatt

是。但是，我絕對不想刪除這些元素 - 它們應該能夠像以前一樣被隱藏。 – Jollywatt 2014-11-07 00:56:37

原來使用jQuery比任何形式的CSS破解的要簡單得多：

rows = $('table tbody tr'); 
rows.find('tr:visible:odd').css('background-color', '#f7f7f7');

，並指定偶數和奇數風格：

rows.find('tr:visible').each(function(i) { 
    if (i%2) { 
     $(this).css('background', '#f7f7f7'); 
    } else { 
     $(this).css('background', 'none'); 
    }; 
});

我知道，我已經回答了自己的問題 - 我應該明確表示我可以使用jQuery！

我只是希望:visible和:even會快點，並使其成爲CSS標準。

來源

2014-11-07 04:31:20 Jollywatt

只是注意到，這是我回答的方法，但使用jQuery – 2014-11-07 07:05:14

是的...我應該給你信用！ – Jollywatt 2014-11-07 18:47:34

我剛剛設法解決這個問題，只需添加一個額外的<tr>元素與display: none;設置（通過CSS，在我的情況下，但可以使用樣式屬性），當一個隱藏的行塊有奇數個元素。這不會滿足每個用例，但是對於使用多行來創建擴展表的情況，它可以很好地工作。

來源

2016-09-27 11:28:22 M1ke

純CSS（沒有JS）解決方案：

訣竅是隱藏與不同的標籤，而不是類的行。「ul/li」標籤必須去。在我的例子中，我使用「del」標籤來隱藏。

.list div:nth-of-type(odd) { background: ghostwhite; } 
 
.list del { display: none; }

<div class="list"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <del>4</del> 
 
    <div>5</div> 
 
    <del>6</del> 
 
    <div>7</div> 
 
</div>

來源

2017-02-02 22:56:41 kornieff

這並不回答這個問題。問題是當使用'display：none'隱藏元素或'* hidden：'具有*相同標記*隱藏元素時，如何執行斑馬條紋，即所有div。你正在使用不同的標籤 – 2017-02-03 00:03:12

@ZachSaucier對，這不是問題所要求的，但僅僅是因爲我沒有考慮過這種方法。雖然它顯然是一個糟糕的黑客攻擊，但實際上它只是改變標籤名稱而不是類，導致DOM（和CSS索引）被重建...... – Jollywatt 2017-02-04 01:44:15

斑馬條紋忽略隱藏元素

回答

相關問題