我的自定义类在与“btn”等预定义类一起使用时不起作用

Question

第一次在这里问自己！事情就是这样。 我正在尝试将我自己的 CSS 类用于颜色。其中有几个不起作用。 这是一个例子：

<button type="button" class="btn btn-ladevi_blue" data-toggle="modal" data-target="#loginModalCenter">
  Launch demo modal
</button>

这里是 CSS：

.btn-ladevi_orange{
color: #FFFFFF;
background-color: #FFA700;
border-color: #FFA700;}

.btn-ladevi_blue{
color: #FFFFFF;
background-color: #00496B;
border-color: #00496B;}

每当我在自定义类之前添加“btn”之类的内容时，它都会被忽略。当我“检查”元素并检查它的属性时，我可以看到它们被覆盖了。但是，如果我将自定义类更改为预定义的“主要”类，它显然可以工作，并且在检查时它们不会被覆盖并且可以正常工作。

我查看了这个网站：

https://codepen.io/ondrejsvestka/pen/NjxgVR

这或多或少是一个想要实现的目标。

现在我将通过在我的 HTML 代码中添加属性作为样式来绕过这个问题（我与其他人一起做的事情，但它们的数量正在增长，哈哈！）。但我想知道如何使这些自定义类与预定义的类一起使用。

提前致谢！

Answer 1

这听起来像是 CSS specificity 的事情，其中​​引导程序 .btn 类优先，因为它的选择器更具体。

来自MDN's Cascade and Inheritance（已添加重点）：

选择器的特异性量是使用四个不同的值（或分量）来衡量的，可以认为是千、百、十和个——四列中的四个个位数：

• 千：如果声明位于样式属性（即内联样式）内，则在此列中得分。此类声明没有选择器，因此它们的特异性总是简单的 1000。
• 百分：在此列中为包含在整体选择器中的每个 ID 选择器得分。
• 十位：每个类选择器、属性选择器或包含在整体选择器中的伪类在此列中得一分。
• 一：每个元素选择器在此列中得一分或包含在整个选择器中的伪元素。

button.btn { /* class name (10) + element (01) = 0011 */
  color: blue;
}

.my-btn { /* class name = 0010 */
  color: red; /* overridden by button.btn because it's more specific than a single classname; 0011 > 0010 */
}

在上面的示例中，button.btn 选择器的特异性得分为 11：button 标记名称为 01，.btn 类名称为 10，总共 11。

.my-btn 选择器的得分为 10（单个类名），因此输给了前一个选择器。

解决方案是让您的选择器更加具体。一种适用于许多情况的快速技巧是在 CSS 中简单地重复您的选择器，这会增加其特异性：

.my-btn.my-btn {
  color: red; /* more specific than the single classname selector below */
}

.my-btn {
  color: blue; /* overridden by more specific selector above */
}

重复相同的类名，如.my-btn.my-btn，不会改变选择器找到的元素，但它将特异性分数从0010增加到0020（类名（10）+类名（10）），所以它胜过后面的单个类名选择器，即使后者出现在样式表的后面。

正如其他人所建议的那样，您可以将!important 添加到所有内容上，但是当您想要进一步修改元素的样式时，这可能会导致问题。你最终会努力覆盖!important，这比简单地遵守特定规则更复杂和令人困惑。