nth-child „kolizji” w elastycznym projektowaniu/Tworzenie siatki płynu

Question

Mam system siatki dla mojej strony, który został początkowo utworzony w stylu zastosowanego do każdego szóstej pozycji w siatce

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

I jestem w procesie podejmowania moja strona czułe i mam przerwania gdzie mogę określić

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

Ale problemem jest to, że nadal interpretacji poprzedni styl 5N + 1, którego nie chcę. Jak powiedzieć CSS, aby zignorował ten styl. Albo jeszcze lepiej, w jaki sposób utworzyć płynną siatkę, aby za każdym razem, gdy przedmiot li był pierwszy z rzędu, ma on margines-lewy od 0, a wszystkie inne mają margines, powiedzmy, 25px?

Answer 1

Używając marginesów ujemnych na elemencie macierzystym, można reagować bez konieczności zapytań mediów:

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

Problem z resetowanie margines na 5n + 1 to nie jestem pewien, czy 5n + 1 zastępuje 3n + 1 lub odwrotnie - bo na 15 elementu zasady te style będzie kolidować.

Są równie specyficzny, ponieważ masz do czynienia tylko z jednym :nth-child() selektora za rządów na raz, więc musisz umieścić 5n + 1 regułę przed 3n + 1 reguły w swojej przerwania, i reset Margines na jakąkolwiek jego niezerową wartość mieści się w Twojej regule 5n + 1. W ten sposób reguła 3n + 1 będzie miała pierwszeństwo dla elementu pasującego do obu reguł.

Nie ma sposobu, aby wybrać pierwszy element z wiersza za pomocą CSS, ponieważ nie ma jasnego pojęcia, co jest pierwszym elementem z rzędu. Jeśli znasz dokładny margines i nie masz zbyt wielu punktów przerwania, to jest to dobra alternatywa.

Answer 3

Spróbuj:

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

:not selektor robi to, co jest napisane na opakowaniu, a nie wybierać elementy, które pasują do wyboru w środku jest wsporniki.

Ponadto, jeżeli dwie reguły zderzają się i nie mają priorytetu, zostanie użyta ta, która pojawia się jako ostatnia w CSS. To może być łatwiej po prostu wstawić li:nth-child(5n+1) po li:nth-child(3n+1) w arkuszu stylów.

EDYCJA: komentarz @ cimmanon na twoje pytanie jest bardzo dobrą alternatywną metodą.