사용 : nth-of-type (n) 테이블 사용
테이블을 읽기 쉽게하기 위해 배경 색상을 번갈아 사용하여 행을 스타일 화하는 것이 도움이됩니다. 표 스타일을 지정하는 가장 일반적인 방법 중 하나는 다른 모든 행의 배경색을 설정하는 것입니다. 이것은 종종 "얼룩말 줄무늬"라고합니다.
CSS 클래스를 사용하여 다른 모든 행을 설정 한 다음 해당 클래스의 스타일을 정의하면됩니다. 이 방법이 효과적이지만 가장 효과적이고 효율적인 방법은 아닙니다.
이 방법을 사용할 때마다 해당 테이블을 편집해야 할 때마다 테이블의 모든 단일 행을 편집하여 각 행이 변경 사항과 일치하는지 확인해야 할 수 있습니다. 예를 들어 테이블에 새 행을 삽입하면 그 아래의 다른 모든 행에 클래스가 변경되어야합니다.
CSS를 사용하면 얼룩말 줄무늬가있는 표 스타일을 쉽게 지정할 수 있습니다. 여분의 HTML 속성이나 CSS 클래스를 추가 할 필요가 없으면 : nth-of-type (n) CSS 선택기를 사용하면 됩니다.
nth-of-type (n) 선택자는 CSS의 구조용 의사 클래스로, 부모 요소 및 형제 요소와의 관계에 따라 요소의 스타일을 지정할 수 있습니다. 이 도구를 사용하여 소스 순서에 따라 하나 이상의 요소를 선택할 수 있습니다. 즉, 부모의 특정 유형의 n 번째 하위 요소 인 모든 요소를 일치시킬 수 있습니다.
문자 n은 키워드 (홀수 또는 짝수), 숫자 또는 수식 일 수 있습니다.
예를 들어 다른 모든 단락 태그를 노란색 배경색으로 스타일을 지정하려면 CSS 문서에 다음이 포함됩니다.
p : n 번째 유형 (홀수) {
배경 : 노란색;
}
HTML 테이블 시작하기
먼저 HTML 형식으로 테이블을 작성하십시오. 행이나 열에 특별한 클래스를 추가하지 마십시오.
스타일 시트에 다음 CSS를 추가하십시오.
tr : n 번째 유형 (홀수) {
배경색 : #ccc;
}
그러면 첫 번째 행부터 시작하여 회색 배경색으로 다른 모든 행의 스타일이 지정됩니다.
같은 방식으로 스타일을 바꾸는 스타일
테이블의 열에 동일한 스타일을 적용 할 수 있습니다. 이렇게하려면 CSS 클래스의 tr을 td로 변경하면됩니다. 예 :
td : n 번째 유형 (홀수) {
배경색 : #ccc;
}
n 번째 유형 (n) 선택기에서 수식 사용
선택기에서 사용되는 공식의 구문은 + b입니다.
a는주기 또는 색인 크기를 나타내는 숫자입니다.
n은 실제로 문자 "n"이고 0을 표시하는 카운터를 나타냅니다.
+ 연산자는 "-"일 수 있습니다.
b는 정수이며 오프셋 값을 나타냅니다 (예 : 선택기에서 배경색을 적용하기 시작하는 행 수). 수식에 연산자가 포함 된 경우 필요합니다.
예를 들어 매 3 행마다 배경색을 설정하려면 수식이 3n + 0이됩니다. CSS는 다음과 같이 보일 수 있습니다.
tr : n 번째 유형 (3n + 0) {
배경 : slategray;
}
nth-of-type 셀렉터 사용을위한 유용한 도구
pseudo-class nth-of-type selector를 사용하는 공식 측면에 다소 위압감이 든다면 nth Tester 사이트를 사용하여 원하는 모양을 얻기 위해 구문을 정의하는 데 도움이되는 유용한 도구를 사용해보십시오. 드롭 다운 메뉴를 사용하여 nth-of-type (nth-child와 같은 다른 의사 클래스도 실험 할 수 있습니다)을 선택하십시오.