2010-07-08 24 views
24

Trừ khi nó không được phép nhưng tôi dường như không thể nhận được nth-child để xác nhận bộ chọn lớp.nth-child không phản hồi với bộ chọn lớp

Tôi đã nói 4 div trong div khác, tất cả các lớp và id khác nhau. Tôi cần phải chọn trường hợp đầu tiên của một div với lớp đã nói. Ví dụ:

#content .foo:nth-child(1) { margin-top: 0; } 

Và rõ ràng một lần nữa với first-child để có được tác động tương tự, nhưng nó không ảnh hưởng đến bất kỳ div nào.

Bây giờ nếu tôi muốn buộc nó để làm việc với div mà tôi có thể làm điều này:

#content .foo:nth-child(3) { margin-top: 0; } 

Nó chỉ như vậy sẽ xảy ra rằng đó là div thứ 3 trong # content, mà là vô nghĩa bởi vì tôi cần phải nhận được ví dụ đầu tiên của bất kỳ thứ gì với lớp đó.

<div id="content"> 
    <div id="action-bar"> </div> 
    <div id="message"> </div> 
    <div class="table"> </div> 
    <div class="clear"> </div> 
</div> 

Đây là một mẫu của HTML, tôi đã cố gắng nth-of-type cũng như thế này:

#content .table:nth-of-type(1) { margin: 0 } 

Một lần nữa nó chỉ đáp ứng khi tôi nói nth-of-type(3).

EDIT:

tôi đã thiết lập một ví dụ làm việc của vấn đề tôi đang gặp ở đây: http://jsfiddle.net/aHwS8/

+0

có lẽ bạn nên cho chúng ta thấy những phần tương ứng của tài liệu HTML thực tế của bạn. – Gumbo

+0

@gumbo chắc chắn điều, tôi chỉ chỉnh sửa nó .. :) – stuartc

+0

Nhưng (ít nhất là trong ví dụ này) bạn chỉ có một yếu tố với bảng * lớp *. – Gumbo

Trả lời

29

Thử :nth-of-type() pseudo-selector thay vì:

#content .foo:nth-of-type(1) { margin-top: 0; } 

Lưu ý rằng :nth-of-type() đếm các yếu tố có cùng tên. Vì vậy, .foo:nth-of-type(1) sẽ không chọn phần tử đầu tiên với lớp foo nhưng bất kỳ phần tử đầu tiên nào là phần tử đầu tiên trong danh sách các phần tử được nhóm theo cùng một tên. Nếu bạn có một số tài liệu như thế này:

<div> 
    <i class="foo">1</i><i>x</i><i class="foo">2</i> 
    <b class="foo">3</b><b>x</b><b class="foo">4</b> 
</div> 

.foo:nth-of-type(1) sẽ lựa chọn các yếu tố <i class="foo">1</i><b class="foo">3</b> như cả hai đều là người đầu tiên của loại hình riêng của mình.

+0

Cảm ơn! Tôi đã cố gắng có cùng một phản hồi, nó trả lời: #content .foo: nth-of-type (3) {margin-top: 0; } – stuartc

+0

Đó là loại tương tự, nó giống như nó bỏ qua lớp .foo và chỉ cần chọn divs – stuartc

+0

@stuartc: Nó không bỏ qua lớp. '.foo: nth-of-type (3)' chỉ áp dụng cho các phần tử có lớp “foo” * và * là phần tử thứ ba của loại (chỉ có 2 anh chị em khác có cùng tên phần tử trước phần tử này)). – Gumbo

0

Tôi nghĩ rằng bạn đang sử dụng bộ chọn sai, hãy thử:

#content .foo:first-of-type { margin-top: 0; } 
+0

Cảm ơn! Tôi đã cố gắng có cùng một phản hồi, nó trả lời: #content .foo: nth-of-type (3) {margin-top: 0; } – stuartc

+0

Hmm, tôi hiểu - vì vậy những gì bạn muốn là 'div' đầu tiên với lớp' .foo' bất kể nó là con nào. Nhưng bộ chọn này làm gì là 'div' đầu tiên nếu nó cũng có lớp' .foo'? Từ google nhanh chóng và xem CSS3 Pseudo-Selectors Tôi không chắc chắn điều này là có thể. Xin lỗi tôi không thể giúp đỡ nhiều hơn nữa! – Jake

+0

Cảm ơn sự giúp đỡ của bạn, mặc dù không khắc phục được vấn đề của tôi, tôi đã học được rất nhiều về các bộ chọn giả! :) cảm ơn một lần nữa! – stuartc

6

Đây là một bài cũ nhưng tôi đã kết thúc ở đây tìm kiếm một câu trả lời cho vấn đề tương tự. Có lẽ điều này sẽ giúp một ai đó.

tôi đã có cơ cấu như sau, muốn chọn "foo" -div n-thứ:

<body> 
    <div class='container'> 
    <div class='foo'></div> 
    </div> 
    <div class='container'> 
    <div class='foo'></div> 
    </div> 
    <div class='container'> 
    <div class='foo'></div> 
    </div> 
    <div class='container'> 
    <div class='foo'></div> 
    </div> 
</body> 

Bí quyết là "quay trở lại" và chọn phần tử cha mẹ với anh chị em lặp đi lặp lại, trong này trường hợp .container và sau đó chọn con của nó (ren):

.container:nth-of-type(3) .foo { 
    styles here 
} 
Các vấn đề liên quan