如何使用另一个CSS类

我是相当新的CSS3来覆盖CSS类的属性，我希望能够做到以下几点：如何使用另一个CSS类

当我加个班变成一个元素，它覆盖此特定元素中使用的另一个类的属性。

比方说，我有

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

我希望能够添加一个名为bakground-none类，这种情况会覆盖默认背景的类left。

谢谢！

来源

2014-01-06 user3075049

只要使用!important这将有助于覆盖

background:none !important;

在此请看：when-using-important-is-the-right-choice

来源

2014-01-06 16:41:00

！重要的是一个不好的做法。很快，所有代码变得非常重要。 – TPAKTOPA

如果列表中的其他类后bakground-none类，它的属性将覆盖已经设置的。这里不需要使用!important。

例如：

.red { background-color: red; } 
.background-none { background: none; }

和

<a class="red background-none" href="#carousel">...</a>

的链接不会有一个红色的背景。请注意，这只会覆盖具有较少或同等特定选择器的属性。

来源

2014-01-06 16:47:41 Ruud

感谢您的回复！我试过这个作为第一个解决方案，但由于某种原因，它不起作用！ – user3075049

如果样式是以特定方式定义的，例如.form-horizontal .form-group {margin-left：-15px}，则这种重写css类的方式将不起作用。在这里你必须使用！重要的 – DanKodi

添加！重要的.background-none {background：none！importatn; }这项工作正常 – santhosh

至于important关键字的选择，你可以使选择更具体的，例如：

.left.background-none { background:none; }

（注：类名之间没有空格）。

在这种情况下，规则将适用于类别属性中列出的.left和.background-none（不管顺序或接近程度如何）。

来源

2014-01-06 17:36:04

涵盖在最多upvoted的答案，但重点 – aidanok

有不同的方法可以覆盖属性。假设您有

.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的全部例子，这是一个至关重要但被广泛误解的概念。它定义了解决样式表规则之间冲突的确切规则。

P.S.我在问题中使用left和background-none。它们是应该使用而不是的类名称的示例，因为它们反映了特定的渲染而不是结构或语义角色。

来源

2014-01-06 17:44:09

LIFO是浏览器的方式解析CSS properties..If您使用萨斯声明称为

变量“$头背景：红色;”

使用它，而不是直接分配像红色或蓝色的值。如果要覆盖只是重新分配值

“$头背景：蓝色”

然后

背景色：$头背景;

它应该平滑覆盖。使用“！重要”并不总是正确的选择..它只是一个修补程序

来源

2016-03-11 09:39:08

您应该通过增加覆盖样式的特定。有增加特异性的不同方法。使用!important会影响特异性，是不好的练习，因为它会破坏样式表中的自然级联。

下图来自css-tricks.com将帮助您根据点结构为您的元素提供正确的特异性。无论哪个特征具有更高的分数，都会赢。听起来像一场比赛 - 不是吗？

结帐样品这里css-tricks.com计算。这将有助于您理解这个概念，并且只需要2分钟。

如果您希望自己生成和/或比较不同的特性，请尝试使用特殊性计算器：https://specificity.keegan.st/或者您可以使用传统纸张/铅笔。

如需进一步阅读，请尝试MDN Web Docs。

所有最好的不使用!important。

来源

2017-09-15 22:08:39 baltoro

如何使用另一个CSS类

回答

相关问题