继承多个nth-child时重置nth-child“清除：两者”

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 的情况下，将对“ strongn” C施加“ 3n + 1”的情况什么时候不应该。

我通过执行以下操作来重置“ 2n + 1”的 B 和 C 属性：

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

然后我通过执行以下操作将 C 属性重置为“ 3n + 1”：

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

这不起作用，因为对于 B 和 C ，“ 2n + 1”的结果为true，对于，“ 3n + 1”的结果为true C 。因此，我在“ 2n + 1”和“ 3n + 1”处应用了“清除：无”。

我被困住了，选择器设置后如何重置或禁用它（第n个类型）？还是在选择器中设置“清除”属性后如何删除？

谢谢！

Answer 1

解决此问题的一种方法是，为媒体查询指定最小值和最大值。从A到B，从B到C，从C到更高。

Answer 2

我设法通过对 B 执行以下操作来解决此问题：

Service

并对 C 执行以下操作：

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

这将重置先前选择器上的“清除”，然后将新的值应用于“清除”。

我希望这可以帮助像我一样陷入困境的其他人。