Đây không phải là một câu trả lời không phải là một câu trả lời, tức là một ví dụ cho thấy lý do tại sao một trong những câu trả lời được bình chọn cao ở trên lại thực sự sai.
Tôi nghĩ câu trả lời đó có vẻ tốt. Trên thực tế, nó đã cho tôi những gì tôi đang tìm kiếm::nth-of-type cái mà đối với hoàn cảnh của tôi, đã hiệu quả. (Vì vậy, cảm ơn vì điều đó, @Bdwey.)
Ban đầu tôi đọc nhận xét của @BoltClock (nói rằng câu trả lời về cơ bản là sai) và bác bỏ nó, vì tôi đã kiểm tra trường hợp sử dụng của mình và nó đã hoạt động. Sau đó, tôi nhận ra @BoltClock có danh tiếng hơn 300.000 (!) Và có một hồ sơ mà anh ấy tự nhận là chuyên gia CSS. Hmm, tôi nghĩ, có lẽ tôi nên nhìn kỹ hơn một chút.
Hóa ra như sau: div.myclass:nth-of-type(2)KHÔNG có nghĩa là "phiên bản thứ 2 của div.myclass". Đúng hơn, nó có nghĩa là "phiên bản thứ 2 của div và nó cũng phải có lớp 'myclass'". Đó là một sự khác biệt quan trọng khi có sự can thiệp divgiữa các div.myclasstrường hợp của bạn .
Tôi đã mất một thời gian để tìm hiểu vấn đề này. Vì vậy, để giúp đỡ những người khác con số nó ra một cách nhanh chóng hơn, tôi đã viết một ví dụ mà tôi tin rằng chứng minh khái niệm rõ ràng hơn một mô tả bằng văn bản: Tôi đã cướp h1, h2, h3và h4các yếu tố để thực chất là divs. Tôi đã đặt một Alớp cho một số trong số chúng, nhóm chúng thành 3, và sau đó tô màu các trường hợp thứ nhất, thứ 2 và thứ 3 bằng cách sử dụng màu xanh lam, cam và xanh lá cây h?.A:nth-of-type(?). (Nhưng, nếu bạn đang đọc kỹ, bạn nên hỏi "trường hợp thứ nhất, thứ 2 và thứ 3 của cái gì?"). Tôi cũng đã xen vào một điểm khác biệt (tức là khác hmức) hoặc tương tự (tức là giống nhauh vào một phần tử chưa được phân loại cấp) vào một số nhóm.
Đặc biệt lưu ý, nhóm cuối cùng của 3. Ở đây, một h3phần tử chưa được phân loại được chèn vào giữa h3.Aphần tử thứ nhất và thứ hai . Trong trường hợp này, không có màu thứ 2 (tức là màu cam) xuất hiện và màu thứ 3 (tức là màu xanh lá cây) hiển thị trên trường hợp thứ 2 của h3.A. Điều này cho thấy rằng ntrong h3.A:nth-of-type(n)đang đếm các h3s, không phải h3.As.
Vâng, hy vọng rằng sẽ giúp. Và cảm ơn, @BoltClock.
div {
margin-bottom: 2em;
border: red solid 1px;
background-color: lightyellow;
}
h1,
h2,
h3,
h4 {
font-size: 12pt;
margin: 5px;
}
h1.A:nth-of-type(1),
h2.A:nth-of-type(1),
h3.A:nth-of-type(1) {
background-color: cyan;
}
h1.A:nth-of-type(2),
h2.A:nth-of-type(2),
h3.A:nth-of-type(2) {
background-color: orange;
}
h1.A:nth-of-type(3),
h2.A:nth-of-type(3),
h3.A:nth-of-type(3) {
background-color: lightgreen;
}
<div>
<h1 class="A">h1.A #1</h1>
<h1 class="A">h1.A #2</h1>
<h1 class="A">h1.A #3</h1>
</div>
<div>
<h2 class="A">h2.A #1</h2>
<h4>this intervening element is a different type, i.e. h4 not h2</h4>
<h2 class="A">h2.A #2</h2>
<h2 class="A">h2.A #3</h2>
</div>
<div>
<h3 class="A">h3.A #1</h3>
<h3>this intervening element is the same type, i.e. h3, but has no class</h3>
<h3 class="A">h3.A #2</h3>
<h3 class="A">h3.A #3</h3>
</div>