将特定CSS类应用于特定CSS类的第二个Span

时间：2018-12-06 10:28:44

标签： html css

我需要使用“ ui-steps-number”类将特定的背景色应用于第二个跨度，但是我正在尝试实现的CSS类被忽略了：

CSS

.ui-steps-number:nth-child(2) {
    background-color: yellow !important;
}

html

<ul role="tablist">
    <li class="ui-steps-item ui-state-highlight" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">1</span>
            <span class="ui-steps-title">QUALIFICATION</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">2</span>
            <span class="ui-steps-title">ANALYSIS</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">3</span>
            <span class="ui-steps-title">QUOTE</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">4</span>
            <span class="ui-steps-title">NEGOTIATION</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">5</span>
            <span class="ui-steps-title">CLOSED</span>
        </a>
    </li>
</ul>

感谢支持

2 个答案:

答案 0 :(得分：2)

您需要解决第二个<li>

.ui-steps-item:nth-child(2) .ui-steps-number {
    background-color: yellow !important;
}

<ul role="tablist">
    <li class="ui-steps-item ui-state-highlight" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">1</span>
            <span class="ui-steps-title">QUALIFICATION</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">2</span>
            <span class="ui-steps-title">ANALYSIS</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">3</span>
            <span class="ui-steps-title">QUOTE</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">4</span>
            <span class="ui-steps-title">NEGOTIATION</span>
        </a>
    </li><li class="ui-steps-item ui-state-default" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">
        <a class="ui-menuitem-link">
            <span class="ui-steps-number">5</span>
            <span class="ui-steps-title">CLOSED</span>
        </a>
    </li>
</ul>

答案 1 :(得分：1)

尝试一下：

.ui-steps-item:nth-child(2) .ui-steps-number {
      background-color: yellow !important;
}