CSS样式中类选择器失效

类选择器失效的问题
案例如下

<style>
    .calc {
        width: 225px;
        border: 1px solid #f77e39;
    }

    .calc .display {
        height: 70px;
        line-height: 70px;
        padding-right: 5px;
        text-align: right;
    }

    .calc .btns {
        display: flex;     /*弹性盒子布局*/
        flex-wrap: wrap;   /* 项目超出自动换行*/
    }


    .calc .btns .btn {
        width: 50px;
        height: 50px;
        border: 1px solid #f77e39;
        margin: 2px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        border-radius: 100px;
    }
    .calc .btns .btnBig {
        width: 104px;
        border-radius: 30px;
    }

</style>

把最后面一个类换成了这种写法 .btnBig就无效了是为什么呢？一定要写成父子类选择器那样吗？不能就选中.btnBig类吗？请解释原因。是因为优先级问题吗？单个类是优先于父子类的，所以只是应用了父子类的而单个类先应用然后被父子类覆盖了。我想的对吗?
把最后面的.calc .btns .btnBig换成

    .btnBig {
        width: 104px;
        border-radius: 30px;
    }

这样就选不中了，是为什么？

/*HTML代码如下*/

<div class="calc">
    <div class="display">0</div>
    <div class="btns">
            <div class="btn">C</div>
            <div class="btn"></div>
            <div class="btn"></div>
            <div class="btn">/</div>
            <div class="btn">7</div>
            <div class="btn">8</div>
            <div class="btn">9</div>
            <div class="btn">*</div>
            <div class="btn">4</div>
            <div class="btn">5</div>
            <div class="btn">6</div>
            <div class="btn">-</div>
            <div class="btn">1</div>
            <div class="btn">2</div>
            <div class="btn">3</div>
            <div class="btn">+</div>
            <div class="btn">0</div>
            <div class="btn">.</div>
            <div class="btn btnBig">=</div>
    </div>
</div>

没改之前的效果图1:

改之后的效果图2:

图2明显效果没用应用上。是为什么？

【以下回答由 GPT 生成】

解决方案:

问题的根本是选择器优先级的问题。在CSS中，选择器与选择器之间是有优先级的，当两个或多个选择器作用于同一个元素时，优先级较高的样式规则将覆盖优先级较低的样式规则。

对于选择器.calc .btns .btnBig，其优先级要高于.btnBig。因此，当使用.calc .btns .btnBig选择器时，该选择器与元素的其他类组合在一起，形成了更具体的选择器，因此其样式将被应用。

而当将选择器.calc .btns .btnBig替换为.btnBig时，选择器的具体性降低了，因此其优先级也降低，导致其样式被其他选择器覆盖而无法生效。

解决该问题的方法是提高.btnBig选择器的优先级，可以使用以下几种方法：

1. 使用更具体的选择器：

<style>
.calc .btns .btnBig {
    width: 104px;
    border-radius: 30px;
}
</style>

这样可以保持选择器的优先级较高。

1. 使用内联样式：

<div class="btnBig" style="width: 104px; border-radius: 30px;"></div>

将样式直接写在元素的style属性中，内联样式的优先级最高，可以确保样式生效。

1. 使用!important声明：

<style>
.btnBig {
    width: 104px !important;
    border-radius: 30px !important;
}
</style>

!important声明可以覆盖其他选择器的样式，但是过度使用!important可能导致样式难以维护，因此应慎重使用。

以上是解决该问题的几种方法，根据具体情况选择合适的方法即可。

因为 .calc .btns .btn 把你的.btnBig覆盖了

选择器的权重呗， .calc .btns .btn 肯定覆盖 .btnBig 这个啊