10、样式选择器权值

文章目录

  • 介绍
  • 样式选择器权值

介绍

本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记

样式选择器权值

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
#box1{
    color:green
}
div{
    color:red
}
.red{
    color:red
}

样式冲突,
    -通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值
    此时就发生了样式的冲突
 
发生样式冲突时,应用那个样式由选择器的权重(优先级)决定 
选择器的权重
   内联样式          1,0,0,0
   id选择器          0,1,0,0
   类和伪类选择器     0,0,1,0
   元素选择器         0,0,0,1
   通配符选择器         0000
   继承的样式         没有优先级
   
   比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则
   越优先显示。
   注意,分组选择器是单独计算的
   选择器的累加,不会超过其最大的数量级,比如,类选择器累加再高也不会超过id选择器
   
   一般,选择器越具体,优先级越高
   
   如果,选择器优先级相同,则优先使用靠下的样式,即后声名的选择器覆盖前边的选择器
   
   !important 表示赋予最高优先级,超过内联样式。
      注意,在开发中,一定要慎用
</style>
<body>
  <div id="box1" class="red" >我是一个div</div>     
</body>
</html>

你可能感兴趣的:(css,css,css3)