Css 样式修改_antd同一个匹配规则的第一个和第二个修改为不同的两个样式

.ant-tabs> .ant-tabs-nav .ant-tabs-nav-wrap{

}

同一个页面，有两个bar 但是一个要设置为背景白色，另一个要设置border-bottom：1px;antd发现都是要改上面这条样式；

但是如果给bar1改好了，就会遮挡住bar2的80%长度的border-bottom;

方案1： 用选择器的nth-child:(1)结果不行.

.........此处省略一系列骚操作.........

方案last： 给bar2指定更详细的规则，搞定。无论样式位置先于bar1还是后于bar1都完美生效。（无语：我要是先试这个办法，能省好多时间呢呀。。。）

.ant-card-body .ant-tabs> .ant-tabs-nav .ant-tabs-nav-wrap {

　padding-left: 8px;

    background:none;

    box-shadow: none;

}

.ant-tabs> .ant-tabs-nav .ant-tabs-nav-wrap {

    padding-left: 8px;

    background: #ffffff;

    box-shadow: 1px 1px 4px rgb(204 204 204 / 50%);

}

MDN中对CSS优先级的样例说的很好：

使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。

<div id="test">
  <span>Text</span>
</div>

div#test span { color: green; }
div span { color: blue; }
span { color: red; }

无论 c​ss 语句的顺序是什么样的，文本都会是绿色的（green），因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色 blue 的规则都会覆盖红色 red 的规则）