Chọn tất cả 'tr' ngoại trừ cái đầu tiên

Làm cách nào tôi có thể chọn tất cả các trphần tử ngoại trừ phần tử đầu tiên trtrong bảng có CSS?

Tôi đã thử sử dụng phương pháp này , nhưng thấy rằng nó không hoạt động.

Bằng cách thêm một lớp vào s đầu tiên trhoặc trs tiếp theo . Không có cách chọn chéo nào để chọn các hàng bạn muốn chỉ với CSS.

Tuy nhiên, nếu bạn không quan tâm đến Internet Explorer 6, 7 hoặc 8:

tr:not(:first-child) {
    color: red;
}

Tôi ngạc nhiên không ai đề cập đến việc sử dụng các tổ hợp anh chị em, được IE7 hỗ trợ và sau này:

tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */

Cả hai đều hoạt động chính xác theo cùng một cách (trong ngữ cảnh của các bảng HTML) như:

tr:not(:first-child)

giải pháp lý tưởng nhưng không được hỗ trợ trong IE

tr:not(:first-child) {css}

giải pháp thứ hai sẽ là tạo kiểu cho tất cả các tr và sau đó ghi đè bằng css cho con đầu tiên:

tr {css}
tr:first-child {override css above}

nghe có vẻ như 'dòng đầu tiên' mà bạn đang nói đến là tiêu đề bảng của bạn - vì vậy bạn thực sự nên nghĩ đến việc sử dụng theadvà tbodytrong đánh dấu của bạn ( nhấp vào đây ) sẽ dẫn đến đánh dấu 'tốt hơn' (chính xác về mặt ngữ nghĩa, hữu ích cho những thứ như trình đọc màn hình ) và dễ dàng hơn, khả năng thân thiện với nhiều trình duyệt cho css-select ( table thead ... { ... })

Mặc dù câu hỏi đã có câu trả lời khá hay, tôi chỉ muốn nhấn mạnh rằng :first-childthẻ đi vào loại vật phẩm đại diện cho trẻ em.

Ví dụ: trong mã:

<div id"someDiv">
     <input id="someInput1" /> 
     <input id="someInput2" />
     <input id="someInput2" />
</div

Nếu bạn muốn chỉ ảnh hưởng đến hai yếu tố thứ hai với lề, nhưng không ảnh hưởng đến yếu tố thứ nhất, bạn sẽ làm:

#someDiv > input {
     margin-top: 20px;
}
#someDiv > input:first-child{
     margin-top: 0px;
}

nghĩa là, vì inputs là con, nên bạn sẽ đặt first-childvào phần đầu vào của bộ chọn.

Xin lỗi tôi biết điều này đã cũ nhưng tại sao không tạo kiểu cho tất cả các phần tử tr theo cách bạn muốn ngoại trừ phần đầu tiên và sử dụng lớp psuedo: con đầu tiên nơi bạn thu hồi những gì bạn đã chỉ định cho tất cả các phần tử tr.

Mô tả tốt hơn bằng ví dụ này:

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

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

/ Patrik

Vì tr:not(:first-child)không được IE 6, 7, 8. hỗ trợ, bạn có thể sử dụng sự trợ giúp của jQuery. Bạn có thể tìm thấy nó ở đây

Một lựa chọn khác:

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

Có thể là ai đó có thể có lợi, dưới đây là những gì tôi đã sử dụng

ol li:not(:first-child) {
    background: black;
    color: white;
}

Bạn cũng có thể sử dụng bộ chọn lớp giả trong CSS của mình như thế này:

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

Điều đó sẽ không áp dụng lớp cho phần tử đầu tiên với lớp .desc.

Đây là một JSFiddle với một ví dụ: http://jsfiddle.net/YYTFT/ , và đây là một nguồn tốt để giải thích các bộ chọn lớp giả: http://css-tricks.com/pseudo- class-selector/

Bạn có thể tạo một lớp và sử dụng lớp khi bạn xác định tất cả các tương lai mà bạn muốn (hoặc không muốn) được CSS chọn.

Điều này sẽ được thực hiện bằng cách viết

<tr class="unselected">

và sau đó trong css của bạn có các dòng (và sử dụng lệnh text-align làm ví dụ):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}