css - 如何使用另一个 CSS 类覆盖 CSS 类的属性

Question

我是 CSS3 的新手，我希望能够执行以下操作:

当我将一个类添加到一个元素中时，它会覆盖该特定元素中使用的另一个类的属性。

假设我有

<a class="left carousel-control" href="#carousel" data-slide="prev">

我希望能够添加一个名为 bakground-none 的类，它将覆盖 left 类中的默认背景。

谢谢!

Answer 1

有多种方式可以覆盖属性。假设你有

.left { background: blue }

例如以下任何一项都会覆盖它:

a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }

前两个通过选择器特异性“获胜”；第三个以 !important 获胜，这是一种钝器。

您还可以组织您的样式表，例如规则

.background-none { background: none; }

仅按顺序取胜，即在其他方面同样“强大”的规则之后。但这会施加限制，并要求您在样式表的任何重组中小心。

这些都是 CSS Cascade 的例子，一个重要但被广泛误解的概念。它定义了解决样式表规则之间冲突的确切规则。

附言我使用了 left 和 background-none 因为它们在问题中被使用过。它们是不应使用的类名示例，因为它们反射(reflect)的是特定的渲染而不是结构或语义 Angular 色。