淘先锋技术网

首页 1 2 3 4 5 6 7

CSS的优先级权重是指CSS选择器决定哪一个CSS规则被应用享有的权重。当多个CSS规则具有相同的属性,则会使用权重定义哪一个规则应用至元素。

css的优先级权重

权重从左到右接近,且左侧的规则权重优先于右侧的规则权重。例如,一个选择器包含一个ID和一个元素,其优先于仅包含一个元素和一个类的选择器。

以下是CSS选择器和其对应优先级权重的示例:


  #my-id { 
    /* 减少开销 */ 
    font-size: 18px !important; 
  }
  .my-class { 
    /* 外观 */ 
    color: red; 
  }
  div { 
    /* 标签选择器 */ 
    font-size: 20px; 
  }

在上面的示例中,选择器 "#my-id", ".my-class",和 "div" 具有不同的权重。" #my-id" 的权重是最高的,因为它包含一个ID选择器,它的权重为10,而其他两个选择器的权重分别为1和0。

此外,带有“!important”关键字的CSS属性会覆盖其他所有权重。这是因为“!important”关键字对应于一个非常高的权重,优先级比ID选择器还高。

在编写CSS时,请记住优先级和其对应的权重。以简单的方式来编写CSS,避免使用过多的CSS规则,特别是在网页中包含大量元素的情况下。