CSS意味着覆盖，但为什么有些CSS类覆盖它

Question

有一个css全局格式化输入字段，但当我想为一个特定的输入字段自定义它，然后它不生效。我认为css是覆盖属性，但为什么全局css类覆盖?

CSS

.special{
margin: 8px 0px;
}

<div class="input-group date-select-with-expire-option  special">
<div class="input-group-prepend">
<span class="input-group-text"> 
<i class="far fa-calendar-alt"></i>
</span>
</div>
<input type="text" class="form-control date-input" name="SelectedDate" placeholder="Select date" />
</div>

下面是我在jsFiddle上的代码示例

Answer 1

这是因为对于链接小提琴中的input,.special是继承的样式，而input[type=text]是直接针对如这里所示:

直接目标元素的样式将始终优先于继承的样式，无论特异性如何

阅读这里的专用性:在CSS中，后面的规则只会在相同的专用性级别上覆盖前面的规则(上面引用的继承例外)，否则更大的专用性胜出，无论顺序如何。