첫 번째 행의 셀에 스타일 적용

매우 간단해야하지만 알아낼 수 없습니다.

다음과 같은 테이블이 있습니다.

<table class="category_table">
 <tr><td> blabla 1</td><td> blabla 2 </td></tr>
 <tr><td> blabla 3 </td><td> blabla 4 </td></tr>
</table>

내가 만들고 싶어 td최초의 태그 tr행이 있습니다 vertical-align. 그러나 두 번째 줄은 아닙니다.

.category_table td{
    vertical-align:top;
}

html css css-selectors html-table

— xperator
소스

— huMpty duMpty

네, 질문하기 전에 그 페이지를 봤는데 작동하지 않았습니다.

— xperator

답변:

175

사용 tr:first-child하여 첫 번째 tr:

.category_table tr:first-child td {
    vertical-align: top;
}

중첩 테이블이 있고 내부 행에 스타일을 적용하지 않으려면 td첫 번째 최상위 수준 의 최상위 수준 tr만 스타일을 가져 오도록 일부 자식 선택기를 추가 합니다.

.category_table > tbody > tr:first-child > td {
    vertical-align: top;
}

— BoltClock
소스

사실 전에 이걸 시도했는데 작동하지 않습니다. 이유가 확실하지 않습니다.

— xperator

나도 모른다. 나는 이것이 모든 주요 브라우저에서 작동한다고 100 % 확신합니다.

— BoltClock

tdFireBug에서 첫 번째 행과 두 번째 행의 태그를 비교 하면 첫 번째 행이 스타일을 상속했지만 두 번째 행은 그렇지 않은 것을 볼 수 있습니다. 두 번째 행이 수직으로 정렬 된 이유를 모르겠습니다!?

— xperator

그렇다면 아마도 기본 스타일 일 것입니다. 기본 표 스타일에 익숙하지 않습니다.

— BoltClock

나는 FireBug에 대해 좀 더 깊이 들어갔다. 문제를 찾은 것 같습니다. 실제로 td두 번째 행의 태그 안에 테이블이 있습니다. 두 번째 행의 셀 안에있는 표가 스타일을 상속 한 것 같습니다.

— xperator

이 작업을 수행해야합니다.

.category_table tr:first-child td {
    vertical-align: top;
}

— 시몬
소스

아래 tr표의 첫 번째 작업은 다음 과 같습니다.thead

table thead tr:first-child {
   background: #f2f2f2;
}

그리고 이것은 처음 작동 tr의 thead및 tbody모두 :

table thead tbody tr:first-child {
   background: #f2f2f2;
}

— 비 카스 쿠마르
소스