thứ n-con "va chạm" trong một thiết kế đáp ứng/tạo một mạng lưới dịch

Question

tôi có một hệ thống lưới điện cho trang web của tôi mà ban đầu được thành lập với một phong cách áp dụng cho tất cả các mục thứ sáu trong một mạng lưới

li:nth-child(5n+1){ margin-left:0 } 

tôi đang trong quá trình làm cho trang web của tôi đáp ứng, và tôi có một breakpoint nơi tôi định

li:nth-child(3n+1){ margin-left:0 } 

Nhưng vấn đề là nó vẫn là giải thích các phong cách trước đây của 5n + 1, mà tôi không muốn. Tôi làm cách nào để yêu cầu CSS bỏ qua kiểu đó. Hoặc tốt hơn, làm thế nào để tôi tạo ra một lưới chất lỏng để bất cứ khi nào một mục li là lần đầu tiên trong một hàng, nó có một lề trái của 0, và tất cả những người khác có một lề, nói, 25px?

Answer 1

Bằng việc sử dụng lợi nhuận tiêu cực đến một yếu tố phụ huynh, bạn có thể được đáp ứng mà không cần truy vấn phương tiện:

http://codepen.io/cimmanon/pen/dwbHi

.gallery { 
    margin: -10px 0 0 -10px; 
    overflow: hidden; 
} 

.gallery img { 
    margin: 10px 0 0 10px; 
    float: left; 
} 

Answer 2

Vấn đề đặt lại lề trên 5n + 1 là tôi không chắc liệu 5n + 1 có thay thế 3n + 1 hay ngược lại - vì ở phần tử thứ 15, các quy tắc kiểu đó sẽ va chạm.

Chúng đều giống nhau vì bạn chỉ xử lý một bộ chọn :nth-child() mỗi quy tắc tại một thời điểm, vì vậy bạn cần đặt quy tắc 5n + 1 trước quy tắc 3n + 1 trong điểm ngắt và đặt lại lề cho bất kỳ giá trị nào khác không nằm trong quy tắc 5n + 1 của bạn. Theo cách này, quy tắc 3n + 1 sẽ được ưu tiên cho một phần tử khớp với cả hai quy tắc.

Không có cách nào để chọn mục đầu tiên trong một hàng bằng cách sử dụng CSS vì nó không có ý tưởng rõ ràng về mục đầu tiên trong hàng là gì. Nếu bạn biết chính xác tỷ lệ sử dụng và bạn không có quá nhiều điểm ngắt để giải quyết, đây là một lựa chọn tốt.

Answer 3

Hãy thử:

li:nth-child(5n+1):not(:nth-child(3n+1)){ margin-left:0 } 

Các :not chọn làm những gì nó nói trên thiếc, và không chọn các yếu tố đó phù hợp với selector bên trong nó là dấu ngoặc đơn.

Ngoài ra, nếu hai quy tắc va chạm và không có mức độ ưu tiên, thì quy tắc xuất hiện cuối cùng trong CSS sẽ được sử dụng. Có thể đơn giản chỉ cần đặt li:nth-child(5n+1) sau li:nth-child(3n+1) trong biểu định kiểu.

EDIT: nhận xét của @ cimmanon về câu hỏi của bạn là một phương pháp thay thế rất tốt.