Có một bộ chọn CSS chuẩn tương tự như: eq() trong jQuery không?

Question

Tôi không biết nếu có một bộ chọn CSS có thể làm tương tự như các dòng dưới đây (jQuery code):

.tab_cadre_central .top:eq(0) table tbody tr td table tbody tr:eq(3) 

Tôi đã cố gắng trong CSS một cái gì đó như thế này:

.tab_cadre_central .top::nth-child(0) table tbody tr td table tbody nth-child:eq(3) { 
    display:none; 
} 

nhưng nó không hoạt động.

Answer 1

Trong khi jQuery :eq() sử dụng 0 dựa trên lập chỉ mục, :nth-child() sử dụng 1 dựa trên lập chỉ mục, vì vậy bạn cần để tăng chỉ số của bạn một cách thích hợp:

.tab_cadre_central .top:nth-child(1) table tbody tr td table tbody tr:nth-child(4) 

Nhưng bạn thực sự cần suy nghĩ về refactoring selector đó ...

---

⚠ Cần lưu ý rằng mặc dù :eq() và :nth-child() có thể hoạt động tương tự - chúng chắc chắn không giống nhau. :eq() sẽ chọn phần tử n + 1 trong tập hợp trong khi :nth-child() sẽ chọn tất cả các phần tử trong tập hợp là con của cha mẹ tương ứng n. ⚠

<div> 
    <span></span> 
    <span></span> 
</div> 
<div> 
    <span></span> 
</div> 

Bộ chọn div span:nth-child(1) sẽ lấy hai yếu tố, trong khi div span:eq(0) sẽ chỉ chọn một.