Làm cách nào tôi có thể chọn tất cả các tr
phần tử ngoại trừ phần tử đầu tiên tr
trong 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.
<tr>
và lớp khác cho phần còn lại của chúng.
Làm cách nào tôi có thể chọn tất cả các tr
phần tử ngoại trừ phần tử đầu tiên tr
trong 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.
<tr>
và lớp khác cho phần còn lại của chúng.
Câu trả lời:
Bằng cách thêm một lớp vào s đầu tiên tr
hoặc tr
s 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;
}
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.
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)
elem + elem
là 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 đó.
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 thead
và tbody
trong đá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-child
thẻ đ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ì input
s là con, nên bạn sẽ đặt first-child
và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:
tr {
border-top: 1px solid;
}
tr:first-child {
border-top: none;
}
/ Patrik
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/
first-child
bỏ qua các lớp học
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;
}