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


257

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.


1
Những trình duyệt này cần phải tương thích với?
Pekka


Câu hỏi của @ Pekka rất quan trọng, vì tôi không thể nghĩ ra bất kỳ cách nào để làm điều này bằng cách sử dụng CSS tiêu chuẩn sẽ hoạt động với các phiên bản IE khác nhau. Nếu bạn cần hỗ trợ IE, giải pháp khả thi duy nhất là một lớp cho lớp đầu tiên <tr>và lớp khác cho phần còn lại của chúng.
Spudley

Tôi không lo lắng về IE nhưng nó sẽ hoạt động trong FF và GC

Câu trả lời:


466

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;
}

18
Tôi cũng muốn chỉ ra tr:not(:first-of-type)một giải pháp tiềm năng, nếu bạn đang tìm kiếm phiên bản đầu tiên của một bộ chọn cụ thể thay vì đứa trẻ tổng quát đầu tiên.
Joshua đốt cháy

2
Tôi nghĩ rằng vào năm 2019, chúng tôi đã hoàn thành với IE (ít hơn 0,5% người dùng từ IE6 đến IE10
Webdess

227

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)

1
Đợi ... làm thế nào đây là câu trả lời được chấp nhận? Bạn không thể nhận được "tất cả nhưng trước tiên" từ tuyên bố đó, đó là những gì OP đang yêu cầu. tr + tr sẽ giúp bạn có được một yếu tố duy nhất. Tôi đoán tr ~ tr sẽ có được tất cả các bạn (tôi đoán một cái gì đó giống như cha mẹ: con đầu lòng ~ tr), nhưng về mặt cú pháp thì không thể đọc được bằng cách nào:
Hairbo

5
@hairbo: tr + tr sẽ giúp bạn có bất kỳ tr nào trực tiếp theo tr khác. Nếu bạn có một bảng có ba hàng, hàng thứ ba trực tiếp theo hàng thứ hai, do đó, nó cũng sẽ khớp. Bạn sẽ chỉ nhận được một phần tử duy nhất nếu bạn sử dụng tr: First-child + tr thay thế. Sự khác biệt duy nhất giữa + và ~ là ~ cho phép bất kỳ số lượng các yếu tố khác ở giữa hai yếu tố được đề cập.
BoltClock

Chỉ muốn thêm, elem + elemlà một giải pháp chung tuyệt vời khi các yếu tố bạn muốn nhắm mục tiêu không phải là con duy nhất. Ví dụ: nếu a <h2>được theo sau bởi một số <p>thẻ, thì thẻ đầu tiên <p>không phải là con đầu tiên trong trường hợp đó.
DisgruntledGoat

27

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}

10

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 theadtbodytrong đá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 ... { ... })


3

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.


1

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


1

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



0

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;
}

-1

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/


1
Điều này sẽ không áp dụng phong cách cho yếu tố đầu tiên, điểm. first-childbỏ qua các lớp học
Fez Vrasta

-3

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;
}

2
những lời cầu xin hiểu câu hỏi trước khi trả lời
Ammar Bozorgvar
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.