修改后的样式不生效被修改前的样式覆盖了？

Question

如题，想要有多个元素横排的时候，第一个和最后一个变成半弧形，一开始用的border-radius，但是后面发现当元素只有一个时就会显示的很怪异，让后就想着干脆一个就左弧+右弧，就有了如下代码。
但是！！！！，改了之后刷新页面，重新run serve后，它还是显示的border-radius我就很崩溃了，看了代码确认没有写重复的啊，为什么浏览器会出来之前的跟修改后的样式而且之前的样式还把修改后的样式给覆盖了？？😩

一开始的代码时这样的，然后last 的border-radius会覆盖first的border-radius

            &:first-of-type {
                border-radius: 15px 0 0 15px;              
                // padding-left: 5px;
              }
              &:last-of-type {
                border-right: 1px solid #cbc8c8c7;
                border-radius: 0 15px 15px 0;
              }

后面我给改成了这样，这样子不是应该四个并存，然后只有一个元素的是时候不应该是它四个角都有弧度吗？可是最后还是被一开始的样式覆盖了我就想不明白了。

 &:first-of-type {
                // 此写法当只有一个元素时，last会覆盖first样式导致显示怪异
                // border-radius: 15px 0 0 15px;
                border-top-left-radius: 15px;
                border-bottom-left-radius: 15px;
                // padding-left: 5px;
              }
              &:last-of-type {
                border-right: 1px solid #cbc8c8c7;
                // border-radius: 0 15px 15px 0;
                border-top-right-radius: 15px;
                border-bottom-right-radius: 15px;
              }

---

！！！为什么打包后的文件出现了重复的，我的源代码只显示1条啊？？

Answer 1

只有一个的是，它是第一个，也是最后一个，所以两个样式都生效。
你想要覆盖的话，需要把覆盖的css属性都写上，才能覆盖

Answer 2

相关解释，不全。
https://www.csdn.net/tags/MtT...