关于CSS的一个入门小问题

Question

刚开始学习前端开发，这个CSS的代码没有区分清楚，希望得到的解答
想问一下下面这个代码中 .error 和 input.error 两个的区别是啥啊，如果同时出现的话好像 .error 那个就没啥用了

<label>
    用户名:
    <input class="error">
</label>
<style>
    .error {
        color: red
    }
    
    input.error {
        color: blue;
    }
</style>

Answer 1

.error 和 input.error 两个对应的都是 input标签

.error 代表着类获取 当前标签指定样式
input.error 代表着 是一个input标签并且当前标签上还要有类 .error

当两个属性都代表一个元素时，由权重来决定那个要去执行
.error 的权重是10
input.error 的权重是11
所以 input.error 会覆盖 .error样式