Legen Sie den Rand für jedes zweite Element in Media-Abfrage-CSS mit zuvor festgelegten Rand für jedes dritte Element

Question

müssen Rand für jedes zweite Element in Media-Abfrage festlegen, die vorher Marge für jedes Drittel hatte.

.title:nth-child(3n+3) {margin-right:0 !important} 

@media screen and (max-width:1160px) and (min-width:900px){ 
.title:nth-child(2n+2) {margin-right:0 !important} 
} 

der untere Teil der CSS überschreibt die Spitze aus irgendeinem Grund nicht. Er setzt den Rand auf das zweite Element, behält jedoch die Randeinstellungen des dritten Elements bei, wie zuvor in css festgelegt.

Answer 1

Sie werden die every 3rd element Regel zurücksetzen müssen, entweder wickeln Sie es in ihren eigenen Medien-Abfrage oder außer Kraft setzen es:

.title:nth-child(3n+3) {margin-right:0} 

@media screen and (max-width:1160px) and (min-width:900px){ 
    .title:nth-child(3n+3) {margin-right: 20px;} 
    .title:nth-child(2n+2) {margin-right:0 } 
} 

jsFiddle:https://jsfiddle.net/9woaL5ho/

Demonstration:

Ersetzen Sie 20px durch den ursprünglichen Wert, da inherit 0 ergibt. Vermeiden Sie die Verwendung von !important.