如何使用另一个 CSS 类覆盖一个 CSS 类的属性 [英] How to override the properties of a CSS class using another CSS class

问题描述

我对 CSS3 还很陌生，我希望能够做到以下几点:

I am fairly new to CSS3 and I want to be able to do the following:

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

When I add a class into a an element, it overrides the properties of another class used in this specific element.

假设我有

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

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

I want to be able to add a class called bakground-none, that will over override the default background in the class left.

谢谢！

推荐答案

有多种方法可以覆盖属性.假设你有

There are different ways in which properties can be overridden. Assuming you have

.left { background: blue }

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

e.g. any of the following would override it:

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

前两个通过选择器的特殊性获胜"；第三个赢了 !important，一个钝器.

The first two "win" by selector specificity; the third one wins by !important, a blunt instrument.

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

You could also organize your style sheets so that e.g. the rule

.background-none { background: none; }

简单地按顺序获胜，即通过遵循其他同样强大"的规则.但这会带来一些限制，并要求您在重新组织样式表时要小心.

wins simply by order, i.e. by being after an otherwise equally "powerful" rule. But this imposes restrictions and requires you to be careful in any reorganization of style sheets.

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

These are all examples of the CSS Cascade, a crucial but widely misunderstood concept. It defines the exact rules for resolving conflicts between style sheet rules.

附言我在问题中使用了 left 和 background-none .它们是不应使用的类名示例，因为它们反映了特定的呈现方式，而不是结构或语义角色.

P.S. I used left and background-none as they were used in the question. They are examples of class names that should not be used, since they reflect specific rendering and not structural or semantic roles.

这篇关于如何使用另一个 CSS 类覆盖一个 CSS 类的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！