html - 如何覆盖父级 :nth-of-type in child element?

Question

我使用的样式表看起来有点像这样:

.base-slider {
    width: 100%;

    .ui-state-default {
        border: none;
    }

    .ui-state-default:nth-of-type(1) {
        background: url('left-end-arrow.png');
    }

    .ui-state-default:nth-of-type(2) {
        background: url('right-end-arrow.png');
    }

    /* loads of other style stuff */
}

.secondary-slider {
    .ui-state-default {
        background: url('single-point-arrow.png');
    }
}

然后在我的 html 中我有类似的东西:

<div id="slider" class="base-slider secondary-slider">
   <a href="#" class="ui-state-default">X</a>
</div>

我遇到的问题是我在 secondary-slider 元素上看到的是“left-end-arrow.png”，而不是“single-point-arrow.png”我期待着

我猜这是因为 nth-of-type(1) 使 base-slider 选择器比子选择器更具体。它是否正确？如果是这样，是否有任何 CSS 方法可以说“忽略此元素上任何先前添加的伪类”？

Answer 1

您可以使用 :nth-of-type(n) 来覆盖以前的伪类样式，如下所示:

DEMO

 .secondary-slider .ui-state-default:nth-of-type(n) {
     background: url('single-point-arrow.png');
 }

或

您可以使第二个 CSS 样式更具体，因为您的容器上有两个 calsses，您可以像这样使用它们:

DEMO

 .base-slider.secondary-slider .ui-state-default {
     background: url('single-point-arrow.png');
 }