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

问题描述

我对CSS3是相当新的，我想要能够做到以下：

当我添加一个类到一个元素，它覆盖的属性

c>< a class =left carousel-controlhref =＃carouseldata-slide =prev>

我想能够添加一个 bakground-none ，将覆盖类中的默认背景。

谢谢！ p>

解决方案

有多种方法可以覆盖属性。假设您有

  .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 ，一个关键但广泛被误解的概念。它定义了解决样式表规则之间冲突的确切规则。

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

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.

Let's say that I have

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

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

Thanks!

解决方案

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; }

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.

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.

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屋！