css nth-child và các lớp học

Question

Tôi gặp sự cố với bộ chọn css-child css. Tôi có một mạng lưới 3x3 elemtens bên trong một thùng chứa. Những yếu tố đó có một lớp được gọi là .square. Với .square:nth-child(3n+1) Tôi chọn mọi thành phần đầu tiên của hàng và tô màu xanh lục. Với .square:nth-child(3n+3) Tôi chọn mọi thành phần cuối cùng của hàng và tô màu đỏ.

Tính năng này hoạt động tốt, cho đến khi có bất kỳ phần tử nào (ví dụ: <br>) được xuất trước lưới. Với mỗi <br> mới, thứ tự di chuyển lên một, như là <br> được coi là .square.

Vì tôi hiểu được số .nth-child, nên chọn mọi phần tử thứ ba của lớp .square. Tại sao nó áp dụng cho bất kỳ yếu tố nào, và làm thế nào tôi có thể đạt được mục tiêu của tôi?

Cảm ơn trước

http://www.hier-krieg-ich-alles.de/shop.php?cat=26491127728

Vấn đề xảy ra trên các hộp ở giữa.

Answer 1

Có vẻ như bạn muốn nth-of-type.

Bộ chọn liên quan mà bạn có thể thấy hữu ích là :first-of-type, :last-of-type, :nth-last-of-type và :only-of-type.

Answer 2

thứ n con chỉ làm việc với các yếu tố html, thứ n con css không biết lớp và id, nếu bạn muốn thiết lập thứ n-con cho lớp, thêm một số thuộc tính tùy chỉnh cho lớp rằng việc sử dụng jquery ..

như

jQuery('.square:nth-child(3n+3)').attr("act","dummy"); 

sau đó sử dụng css

div[act='dummy']{ 
border : 1px solid red;}