programing

첫번째를 제외한 모든 'tr'을 선택합니다.

closeapi 2023. 10. 8. 09:52
반응형

첫번째를 제외한 모든 'tr'을 선택합니다.

모두 선택하려면 어떻게 해야 합니까?tr제1원소를 제외한 원소들trCSS가 있는 테이블에서?

방법을 사용해 보았지만 효과가 없었습니다.

첫번째 클래스에 클래스를 추가함으로써tr아니면 그 다음에trs. 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}

다른 옵션:

tr:nth-child(n + 2) {
    /* properties */
}

당신이 말하는 '첫 번째 줄'이 테이블 header인 것처럼 들립니다. 그래서 당신은 정말로 사용하는 것을 생각해야 합니다.thead그리고.tbody당신의 마크업(여기 클릭)은 '더 나은' 마크업(semant적으로 정확하고 스크린 리더와 같은 것들에 유용한)과 CSS-selection에 대한 더 쉽고 browser 친화적인 가능성(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아이들도 마찬가지야, 당신은 그 아이들을first-child선택기의 입력 부분에서.

죄송합니다. 이것이 오래되었다는 것을 알고 있지만 첫 번째를 제외하고 모든 트리를 원하는 방식으로 스타일을 지정하고 모든 트리에 대해 지정한 것을 취소하는 psuedo class:first-child를 사용하는 것이 어떻습니까?

이 예를 통해 더 잘 설명할 수 있습니다.

http://jsfiddle.net/DWTr7/1/

tr {
    border-top: 1px solid;
}
tr:first-child {
    border-top: none;   
}

/패트릭

부터tr:not(:first-child)IE 6, 7, 8에서는 지원되지 않습니다. jQuery의 도움을 사용할 수 있습니다.여기서 찾을 수 있습니다.

다음과 같이 CSS에서 유사 클래스 선택기를 사용할 수도 있습니다.

.desc:not(:first-child) {
    display: none;
}

클래스가 .desc인 첫 번째 요소에는 클래스가 적용되지 않습니다.

다음은 JSFiddle의 예입니다: http://jsfiddle.net/YYTFT/, 그리고 이것은 의사 클래스 선택자를 설명하기 위한 좋은 자료입니다: http://css-tricks.com/pseudo-class-selectors/ . http://css-tricks.com/pseudo-class-selectors/

CSS에 의해 선택되기를 원하는(또는 원하지 않는) 미래의 모든 것을 정의할 때 클래스를 만들고 클래스를 사용할 수 있습니다.

이것은 글로 이루어질 것입니다.

<tr class="unselected">

다음 css에서 행이 있는 경우(예를 들어 text-align 명령어 사용):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}

언급URL : https://stackoverflow.com/questions/4013701/select-all-tr-except-the-first-one

반응형