1、css 选择器 权重 匹配规则

选择器优先级

• !important > 内联样式 > id > class | 属性 > 标签 > 通配符 > 继承
• !important 直接跟在属性值后面 width: 100px; !important
• 内联样式

• id #box{
• class .box{
• 属性 [ type='submit' ]{
  -- a[href][title="test"] 所有含有href及title为test的a标签元素
• 类选择器 .box{
• 通配符 *[href] 所有包含href的元素

选择器权重分值

• !import 最高
• 内联样式 1000
• id选择 100
• 类选择、属性选择、伪类 10
• 标签选择、伪标签 1
• 通配符 0

包含选择器(后代选择器)

• dom结构需要为包含关系
• 样式文件选择器之间需要空格

并列选择器(子类选择器)

• 一个标签使用了多个class后，可以通过并列选择器进行匹配。
• 写法: .clas1.clas2 元素：

分组选择器

• 写法逗号隔开 如 h2,a{ clolor: red }
• 代表所有h2元素和a元素的字体颜色为红色

扩展

• 包含选择器、父子选择器、兄弟选择器都属于派生选择器
• 派生选择器的底层查找顺序为从子类开始查找，逐层向上寻找，这样匹配的效率更高。
• 包含选择器
  -- 使用包含选择器按照dom层级编写样式，可以更好的防治全局污染
• 并列选择器
  -- 一个标签可以有多个class名，如：

• 并列选择器的配规则
  -- 如果样式表存在任意一个class选择器，则会对目标元素产生影响。
  -- 如果样式表中的并列选择器包含在元素class类名之内，则对元素产生影响。但是并列选择器多于元素的类名，则不会产生影响。如下：

  
  
  image.png