为什么我的 .bb 类不能处理输入标签？答案

【问题标题】：Why my .bb class is not working on input tag?为什么我的 .bb 类不能处理输入标签？
【发布时间】：2021-09-16 18:53:17
【问题描述】：

当我向标签添加类“bb”时，我希望输入边框为绿色。当我将 CSS 中的类定义为“input.bb”并将类“bb”添加到我的 HTML 标记时，它可以工作。

我希望能够仅通过“.bb”定义类并将类“bb”添加到我的 HTML 标记中，但它不起作用。我是新手，它应该像标签一样工作。感谢您的帮助。

.bb{
    border-color:var(--success-color);
}

<div class="field">
    <label class="field-title">Re-enter Password</label>
    <input class="bb" type="password" placeholder="Re-enter Password">  
    <small >Error message</small>    
</div>

【问题讨论】：

标签： html css class

【解决方案1】：

这是由于一种叫做 specificity 的东西，我承认这是 CSS 中比较棘手的概念之一。你可以阅读更多关于它here

简而言之，它赋予每条 CSS 规则一个权重，当两个规则发生冲突时，权重最大的规则胜出。

在链接的 CSS 中，您有以下两条规则来设置输入元素的边框

.form input { }
.bb { }

的权重是11（10来自类，1来自元素），第二个是10（只是一个类）。这意味着第一条规则将更加具体并且胜出：您的边框从该声明中获取颜色。

【讨论】：