10、样式选择器权值

最新推荐文章于 2022-10-10 09:07:41 发布

原创最新推荐文章于 2022-10-10 09:07:41 发布 · 369 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

css 专栏收录该内容

50 篇文章

订阅专栏

本文详细解析了CSS中样式选择器的权值概念，包括内联样式、ID选择器、类选择器等的优先级计算规则，以及如何解决样式冲突问题。

文章目录

介绍
样式选择器权值

介绍

本文是在学习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
   通配符选择器         0，0，0，0
   继承的样式         没有优先级
   
   比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则
   越优先显示。
   注意，分组选择器是单独计算的
   选择器的累加，不会超过其最大的数量级，比如，类选择器累加再高也不会超过id选择器
   
   一般，选择器越具体，优先级越高
   
   如果，选择器优先级相同，则优先使用靠下的样式，即后声名的选择器覆盖前边的选择器
   
   !important 表示赋予最高优先级，超过内联样式。
      注意，在开发中，一定要慎用
</style>
<body>
  <div id="box1" class="red" >我是一个div</div>     
</body>
</html>