CSS选择器及其优先级

css选择器种类

• 通用选择器：*
• id选择器：#header{}
• class选择器：.header{}
• 元素选择器：body,div,p,ul,li
• 子选择器：ul > li{}
• 后代选择器：div p{}
• 群组选择器： div,span{color:red} 即具有相同样式的标签分组显示
• 伪类选择器：:hover、::selection、 .action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等,例如a元素的伪类，4种不同的状态：link、visited、active、hover
• 伪元素选择器: :after、:before等,例如：li:after
• 属性选择器: input[type="text"]
• 组合选择器：
  • E,F 与 E F（后代选择器）
  • E>F（子元素选择器）
  • E+F（直接相邻元素选择器----匹配之后的相邻同级元素）
  • E~F（普通相邻元素选择器----匹配之后的同级元素）
• 层次选择器：p~ul 选择前面有p元素的每个ul元素

css样式优先级规则

1. 优先级顺序为：!important>style>权重值

2. 如果权重相同，则最后定义的样式的起作用，应该避免这种情况出现

3. 权重规则：
   内连样式 优先级 1000

   id 选择器 优先级 100

   类选择器 优先级 10

   伪类/属性

   元素选择器 优先级 1

   统配选择器 优先级 0

4. 应用案例：#username和span#username的优先级哪个比较高？

  优先级是通过特殊性的数值相加的，例如#username的数值是100，span#username的优先级是ID选择器的100加上span的元素选择器优先级1，也就是101，101大于100，后面的优先级高

css优先级

不同级别

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2. 作为style属性写在元素内的样式
3. id选择器
4. 类选择器
5. 标签选择器
6. 通配符选择器
7. 浏览器自定义或继

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器

同一级别

1. 同一级别中后写的会覆盖先写的样式
2. 同一级别css引入方式不同，优先级不同

总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)

更多精彩

同步博客请移步：http://by.wlgzs.club:8082/articles/2019/12/08/1575764292004.html