奇怪顯示的孩子的風格

我正在尋找一種方式來應用顯示的奇怪（或甚至）兒童的一些特定樣式（因此排除隱藏的孩子）。 Optionnaly，如果這種風格適用於隱藏的兒童顯示，它將是完美的！奇怪顯示的孩子的風格

這裏是一個活的沙箱：http://jsfiddle.net/zrges/1/

，這裏是我的視覺想：http://jsfiddle.net/qJwFj/（當然，這只是一個顯示示例，不照顧，我寫了那蹩腳的代碼）

我無法管理好的僞類，css選擇器來處理。

我希望能有一個完整的CSS/HTML解決方案（不是JS/PHP的一個，這是比較容易）

非常感謝您！

來源

2012-04-13 Guile

這已經被問了很多次（但我有各種各樣的麻煩尋找*好*重複）;答案仍然是否定的，你不能用純粹的CSS選擇器來做，除非有某種模式。 – BoltClock 2012-04-13 09:54:22

@ BoltClock'saUornorn我有同樣的困難找到答案。所以如果你說它是重複的，我很抱歉，並會嘗試找到所有的答案。謝謝 – Guile 2012-04-13 10:09:06

-1

對於表，你可以使用

tr:nth-child(even) { // your style } 
tr:nth-child(odd) { // your style}

或

tr:nth-child(2n+0) { // your style } 
tr:nth-child(2n+1) { // your style}

來源

2012-04-13 09:57:58

['：nth-child']（http://stackoverflow.com/tags/nth-child/info）選擇器只查看兄弟位置，而不考慮其他選擇器。所以，這不會按照問題中的要求排除隱藏的孩子。 – 2012-04-13 09:58:21

我錯過了「隱藏的孩子」部分。你是對的。 – 2012-04-13 10:06:20

CSS：

tr.sub { display: none; } 
.color { background: blue; }

JS：

$(document).ready(function() { 
    $('table tr:visible:even').addClass('color'); 

    $('#toggle').click(function() { 
     $('table tr').removeClass('color'); 
     $('table tr.sub').toggle(); 
     $('table tr:visible:even').addClass('color'); 
    }); 
});

來源

2012-04-13 10:05:25 candyleung

檢查了這一點：http://jsfiddle.net/qbXVV/18/

HTML：

<button id="toggle">Toggle it!</button> 
<table> 
    <tr class="sub"><td>Row 1</td></tr> 
    <tr class="tag"><td>Row 2</td></tr> 
    <tr class="sub"><td>Row 3</td></tr> 
    <tr class="tag"><td>Row 4</td></tr> 
    <tr class="sub"><td>Row 5</td></tr> 
    <tr class="tag"><td>Row 6</td></tr> 
    <tr class="sub"><td>Row 7</td></tr> 
</table>

CSS：

 tr:nth-of-type(even),.bg { 
     background-color: gray; 
    } 

    .hidden { 
     display:none; 
    }

JS：

$(document).ready(function() { 
$('#toggle').click(function() { 
    $('.tag').toggleClass("hidden"); 
    $(".sub:nth-child(4n+1)").toggleClass("bg"); 
}); 
});

來源

2012-04-13 10:28:32 Ankit

請在答案中加入代碼。 – BoltClock 2012-04-13 12:16:54

添加了代碼...編輯我的主帖。 – Ankit 2012-04-18 06:18:35

奇怪顯示的孩子的風格

回答

相關問題