如何覆盖父元素:子元素中的nth-of-type？

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)覆盖以前的伪classe样式,如下所示:

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');
 }