📜  CSS 中的类顺序如何工作?

📅  最后修改于: 2021-11-03 04:20:39             🧑  作者: Mango

许多开发人员都知道 CSS 中类覆盖的概念。嗯,确实如此,但是当谈到如何覆盖这些类时,它们中的大多数都会感到困惑。类是前端开发的重要资产之一。因此,清楚地了解它们是非常重要的。需要包含在 HTML 元素中的样式属性在类中定义,然后可以使用标签中的“样式”属性调用。 style 属性支持您提供的尽可能多的值(类),混乱从这里开始!

无论是在块内的同一文件中定义类还是从不同的 CSS 文件调用类。这个规则保持一致。

如果多个类由相似的属性组成并且它们在同一个 HTML 元素中使用。然后,修改最新的类将用于设置元素的样式。

下面的例子说明了类顺序的概念:
例子



  

    Specify the order of classes in CSS
    

  

    

Geeksforgeeks

    A Compter Science Portal for Geeks     
    
    
        
                     
           
                     
           
                     
           
                     
    
  

输出:

  • 现在,如果您注意到分别代表类 box1 和 box2 的div1div2 会给您预期的结果。
  • 但是,在样式属性为box1 box2的 div3的情况下,它会调用多个 CSS 类。现在人们可能很容易混淆,因为box1首先写在 div3的 style 属性中,因此被调用之前,然后一旦调用 box2 ,它应该覆盖box1 。但事实并非如此。如果您仔细查看 style.css 文件, box1{}是在 box2{}之前定义的,这就是box1被 box2覆盖的原因。在 div4 的情况下,当我们在box1之前调用 box2 时。同样的机制起作用并在div4块中提供 box2 的样式。

    注意:请记住内联 CSS 始终比外部和内部 CSS 具有更高的优先级。因此,如果您在 HTML 元素中使用内联样式,那么内联样式中定义的属性将覆盖预定义的类。如果您知道 !important关键字,您可以忽略所有这些内容。