CSS 中的类顺序如何工作？

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

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

“The order of the classes in which they would work does not depend upon the order, in which they are written in the class attribute. Rather, it is decided by the order in which they appear in the block or the .css file”

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

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

  

    
    

  

    
Geeksforgeeks
    A Compter Science Portal for Geeks
    

    

    

        

            
        
  
        

            
        
  
        

            
        
  
        

            
        
    

  

输出：

现在，如果您注意到分别代表类 box1 和 box2 的div1和div2 会给您预期的结果。

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

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