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>

我遇到的问题是我看到了＆＃39; left-end-arrow.png＆＃39;在我的secondary-slider元素而不是＆＃39; single-point-arrow.png＆＃39;这就是我所期待的

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

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

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

1 个答案: