이렇게 CSS에서 가상 클래스를 결합 할 수 있습니까?

Question

HTML :

<table> 
<tr class="not-counted"><th>Heading 1</th></tr> 
<tr><td>key1</td><td>val1</td></tr> 
<tr><td>key2</td><td>val2</td></tr> 
<tr class="not-counted"><th>Heading 2</th></tr> 
<tr><td>key3</td><td>val3</td></tr> 
</table>​ 

CSS 스타일 :

table tr:not(.not-counted):nth-child(even) td { 
    background-color: gray; 
}​ 

데모 : 나는 KEY3을 포함 TR이 너무 회색 배경있을 것입니다하지만이 작동하지 않는 것으로 기대 http://jsfiddle.net/MartyIX/fdtpL/

. CSS를 올바르게 작성하는 방법

감사합니다.

Answer 1

을 당신이 (6)와 함께 작동 할 수 있지만 7 실패 할 거라고 나는 더미 라인의 도움으로 문제 해결 :

HTML을

<table> 
<tr><th>Heading 1</th></tr> 
<tr style="display:none;"><th></th></tr> <!-- dummy line --> 
<tr><td>key1</td><td>val1</td></tr> 
<tr><td>key2</td><td>val2</td></tr> 
<tr><th>Heading 2</th></tr> 
<tr style="display:none;"><th></th></tr> <!-- dummy line --> 
<tr><td>key3</td><td>val3</td></tr> 
</table>​ 

CSS

table tr:nth-child(even) td { 
    background-color: gray; 
}​ 

데모

http://jsfiddle.net/MartyIX/fdtpL/3/

내가 정말 자랑 아니에요

하지만 난 그와 함께 너무 많은 시간을 잃었습니다.

Answer 2

스타일이 지정되지 않은 (또는 숨겨진, 같은 결과) 알 수없는 행이있는 얼룩말 행이있는 표를 CSS의 스타일로 지정하려는 경우,이 unstyled 행은 표의 어느 위치 에나 있습니다.
스타일을 지정할 나머지 행마다 홀수 위치의 알 수없는 번호 열과 짝수 번째 위치의 알 수없는 번호 열이 순서대로 앞에옵니다.

제약 조건을 추가하지 않는 한 특별한 요구 사항은 CSS2.1 또는 CSS3에서 스타일을 지정할 수 없습니다.
예를 들어, 얼마나 많은 줄무늬가없는 행을 알고 있다면 다음 트위터의 2 피들이 트릭을 수행 할 것입니다. https://twitter.com/#!/PhilippeVay/statuses/166243438436687873 이것은 지옥의 CSS입니다. 프로덕션에서는 사용하지 마십시오! 간단히 말하면, jQuery/Sizzle과 그 의사 인 :visible은 훨씬 우수합니다. 또는 스타일을 지정하려는 각 행에 서버 측 클래스를 추가하십시오.

다른 예 : http://jsfiddle.net/yBKqy/
두 번째 줄없는 행 옆에있는 행까지 작동하는 것을 볼 수 있습니다. 아래의 나머지 행은 둘 다 홀수의 스타일이없는 행과 짝수 인 스타일이없는 행으로 시작됩니다. 적용되는 규칙이 선언 된 마지막 규칙이됩니다. AFAIK는 의미있는 방식으로 하나 또는 다른 것을 적용 할 수 없습니다. 첫 번째 선택기에 가중치를 추가하면 항상 적용됩니다. 당신이하지 않으면 마지막 것이 항상 적용됩니다. http://jsfiddle.net/yBKqy/3/
이 특별한 예는 연속으로 4 개 이하의 행이 작동 하지만 6 :

여기, 또 다른 스타일이 적용되지 않은 행 또는 테이블의 끝에있다 전에 스타일이 적용되지 않은 행을 따를 수 있습니다 얼마나 많은 행 알고 있다면

다른 바이올린의 . 등