색칠 공부 테이블 행 - 3 행, 3 가지 색상?

Question

나는 기본적으로 다음과 같이 3 개 가지 색상으로 내 테이블 행의 배경색을 설정하려면 :

행 1 - 레드
행 2 - 블루
3 행 - 화이트

초기에는 더 나는했습니다 내가 이걸 사용했을 때 다른 색상이 두 가지 밖에 없었습니다 tr:nth-child(2n+3) {background: #6bb8ff}

그러나 3 가지 색상으로는 작동하지 않습니다. 예를 들어 여섯 번째 줄은 매 3 번째 줄마다 매치 될 것입니다.

다른 방법이 있습니까, 아니면 너무 복잡하다고 생각합니까? :-)

Answer 1

왜 클래스를 사용하여 행을 표시할까요?

<style> 
.row1 { 
background-color: #FF0000 
} 
.row2 { 
background-color: #0000FF 
} 
.row3 { 
background-color: #FFFFFF 
} 
</style> 

HTML

<table> 
<tr class="row1"><td>Roeeels</td><td>Rofles</td></tr> 
<tr class="row2"><td>Roeeels</td><td>Rofles</td></tr> 
<tr class="row3"><td>Roeeels</td><td>Rofles</td></tr> 
<tr class="row1"><td>Roeeels</td><td>Rofles</td></tr> 
<tr class="row2"><td>Roeeels</td><td>Rofles</td></tr> 
<tr class="row3"><td>Roeeels</td><td>Rofles</td></tr> 
</table> 

Answer 2

당신은 모든 세 번째 요소에 대한 :nth-child(3n+3)을 사용할 수 있습니다 : 당신은 출력 코드에 스크립트 언어를 사용하는 경우,이

이

CSS 구현하기 위해 너무 열심히하지 않아야 .

Answer 3

:nth-of-type(3n), :nth-of-type(3n+1),:nth-of-type(3n+2) 

트릭을 수행했습니다.

Answer 4

<table> 
<tr><td>Row1</td></tr> 
<tr><td>Row2</td></tr> 
<tr><td>Row3</td></tr> 
<tr><td>Row4</td></tr> 
<tr><td>Row5</td></tr> 
<tr><td>Row6</td></tr> 
<tr><td>Row7</td></tr> 
</table> 

table tr:nth-child(3n+1) 
{ 
color:red; 
} 
table tr:nth-child(3n+2) 
{ 
color:blue; 
} 
table tr:nth-child(3n+3) 
{ 
color:white; 
} 

Working Example