CSS 表示覆盖但为什么有些 css 类会覆盖它

Question

有一个 css 可以全局格式化输入字段，但是当我想为一个特定的输入字段自定义它时，它不会生效。我认为 css 是覆盖属性，但为什么全局 css class 覆盖？

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

这是因为对于链接 fiddle 中的 input，.special 是 inherited 样式，而 input[type=text] 是 直接针对 并且如前所述here:

Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.

了解特异性 here：在 CSS 中，后面的规则仅在相同的特异性级别上覆盖较早的规则（上面引用的继承除外），否则更大的特异性获胜，无论订单。

CSS 表示覆盖但为什么有些 css 类会覆盖它

CSS means overwriting but why some css classes override it

html

css

web-frontend

CSS 表示覆盖但为什么有些 css 类 会覆盖它

CSS means overwriting but why some css classes override it

html

css

web-frontend

CSS 表示覆盖但为什么有些 css 类会覆盖它