Сброс nth-child "очистить: оба" при наследовании нескольких nth-потомков

Question

Я использую CSS (в частности, SCSS), чтобы применить стилизацию к одному и тому же элементу на разных носителях: A , B и C .

Я использую следующее для A :

&:nth-of-type(2n+1) {
    clear: both;
}

И я использую следующее для B :

&:nth-of-type(3n+1) {
    clear: both;
}

И я использую следующее для C :

&:nth-of-type(4n+1) {
    clear: both;
}

Стиль наследуется от A до B и от B до C .Таким образом, «2n + 1» применяется к B и C , когда это не следует, и «3n + 1» применяется к C , когда это необходимоnot.

Я сбрасываю свойства B и C для "2n + 1", выполняя следующие действия:

&:nth-of-type(2n+1) {
    clear: none;
}

Затем я сбрасываюсвойство C для "3n + 1", выполнив следующее:

&:nth-of-type(3n+1) {
    clear: none;
}

Это не сработало, поскольку значение "2n + 1" будет иметь значение true для B и C , а "3n + 1" будет иметь значение true для C .Таким образом, я получаю «clear: none», применяемый в «2n + 1» и «3n + 1».

Я застрял, как я могу сбросить или отключить селектор (nth-of-type) один разустановлено?Или как удалить свойство «clear», если оно установлено в селекторе?

Заранее спасибо!

Answer 1

Мне удалось решить эту проблему, выполнив следующие действия для B :

&:nth-of-type(2n+1),
&:nth-of-type(3n+1) {
    clear: none; // Clear previous "A" setting
}
&:nth-of-type(4n+1) {
    clear: both;
}

И выполнив следующие действия для C :

&:nth-of-type(2n+1),
&:nth-of-type(3n+1),
&:nth-of-type(4n+1) {
    clear: none; // Clear previous "A" and "B" settings
}
&:nth-of-type(4n+1) {
    clear: both;
}

Это сбрасывает «очистить» на предыдущих селекторах, а затем применяет новое значение «очистить».

Надеюсь, это поможет другим людям, которые застряли, как я.

Answer 2

Одним из способов решения этой проблемы является указание как минимального, так и максимального значения для медиазапросов.От A до B, от B до C, от C и выше.