css选择器的优先级

yaojie.yao

于 2020-05-06 16:54:27 发布

阅读量245

点赞数

分类专栏： css 文章标签： css

版权

9 篇文章

订阅专栏

本文介绍了CSS选择器的优先级规则，包括常用的选择器排序：`!important > 行内样式 > #id > .class > 标签`，以及权重值详解，如行内样式权重1000，ID权重100，类权重10，元素选择器权重1，并提到权重值可以叠加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css的优先级

!important>行内样式>#id>.class>标签(div,p…)

div{
 color:red !important;
}
body div{
 color:red !important;  
 /* 该权重值就大于上方*/
 /* !important使用后不利于后期的调试,尽量用子代,后代叠加权重值 */
}

…当然还有一些不常用的就不一一列举了,权重值也是可以叠加的

列如:

body div ul li{
  color:red
  /* 1+1+1+1=4  该权重值为4*/
 
  
}
body>#box>.item{
/* 1+100+10=111 该权重值为111*/
}