CSS가있는 테이블 tr
에서 첫 번째 요소를 제외한 모든 요소를 어떻게 선택할 수 tr
있습니까?
이 방법을 사용해 보았지만 효과가 없다는 것을 알았습니다.
답변
첫 번째 tr
또는 후속 클래스에 클래스를 추가합니다 tr
. CSS만으로 원하는 행을 선택하는 크로스 브라우저 방법은 없습니다.
그러나 Internet Explorer 6, 7 또는 8에 관심이없는 경우
tr:not(:first-child) {
color: red;
}
답변
IE7 이상에서 지원되는 형제 자매를 사용한다고 언급 한 사람이 아무도 없습니다.
tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */
둘 다 다음과 같은 방식으로 (HTML 테이블의 맥락에서) 정확히 동일한 방식으로 작동합니다.
tr:not(:first-child)
답변
이상적인 솔루션이지만 IE에서는 지원되지 않습니다.
tr:not(:first-child) {css}
두 번째 해결책은 모든 tr의 스타일을 지정하고 첫 번째 자식의 경우 CSS로 재정의하는 것입니다.
tr {css}
tr:first-child {override css above}
답변
당신이 말하는 ‘첫 번째 라인’과 같은 소리는 테이블 헤더입니다. 따라서 실제로 사용 thead
하고 tbody
마크 업 ( 여기를 클릭하십시오 )을 생각해야합니다. ) 및 CSS 선택을위한 더 쉽고 크로스 브라우저 친화적 인 가능성 ( table thead ... { ... }
)
답변
질문에 괜찮은 대답이 있지만 :first-child
태그가 자식을 나타내는 항목 유형에 적용된다는 것을 강조하고 싶습니다 .
예를 들어, 코드에서 :
<div id"someDiv">
<input id="someInput1" />
<input id="someInput2" />
<input id="someInput2" />
</div
첫 번째가 아닌 여백이있는 두 번째 두 요소에만 영향을 주려면 다음을 수행하십시오.
#someDiv > input {
margin-top: 20px;
}
#someDiv > input:first-child{
margin-top: 0px;
}
즉, input
s는 자식이므로 first-child
선택기의 입력 부분에 배치합니다.
답변
죄송합니다. 이것이 오래되었다는 것을 알고 있지만 첫 번째 요소를 제외한 모든 tr 요소의 스타일을 지정하고 모든 tr 요소에 대해 지정한 것을 취소하는 psuedo 클래스 : first-child를 사용하십시오.
이 예제에서 더 잘 설명됩니다.
tr {
border-top: 1px solid;
}
tr:first-child {
border-top: none;
}
/ Patrik