CSS选择器及优先级权重

CSS 选择器分类

• 标签选择 （div）
• id选择器 （#id）
• class选择器 (.class)
• 后代选择 （div a）
• 子代选择 （div > p）
• 相邻选择 （div + p）
• 通配符选择 （*）
• 否定选择器 :not(.link){}
• 属性选择器
• 伪类选择器
• 伪元素选择器 ::before{}

CSS3属性选择器

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

CSS3伪类选择器

伪类 | MDN
常用：

• :hover
• :focus
• :after 在元素之前添加内容,也可以用来做清除浮动。
• :before 在元素之后添加内容
• :enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。
• :disabled 控制表单控件的禁用状态。
• :checked 单选框或复选框被选中
• ::selection 用户选中的区域
• :empty 一般用来隐藏内部什么都没有的元素
• :not(selecter)
• p:first-of-type
• p:last-of-type
• p:only-of-type
• p:nth-of-type(n)
• p:nth-last-of-type(n)
• :nth-child(n)
• :nth-last-child(n)
• p:only-child

伪类和伪元素区别

• 伪类值一种状态 比如:hover
• 伪元素是一个真实存在的元素，他可以有样式有内容

iconfont原理

• 利用编码让图标编为一个字符
• 引入字体
• 利用before伪元素向页面中插入一个文字

css 定义的权重

• !important 优先级最高，但也会被权重高的important所覆盖
• 行内样式总会覆盖外部样式表的任何样式(除了!important)
• 单独使用一个选择器的时候，不能跨等级使css规则生效
• 如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效
• 如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则
• 权重相同时，与元素距离近的选择器生

权值等级划分， 一般来说是划分4个等级：

• 第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；

• 第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；

• 第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type],
  权值 0,0,1,0；

• 第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline,
  ::selection, 权值 0,0,0,1；

• 此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；

权值计算 公式：

权值 = 第一等级选择器个数，第二等级选择器个数，第三等级选择器个数，第四等级选择器个数

一句话总结：

css属性!important>内联样式 >ID选择器(id)>类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等] >元素选择器(p等) = 伪元素选择器(:after/:before/::selection等) >通用选择器(*) >继承的样式

浏览器解析CSS

.wrapper div > p CSS中，浏览器查找元素是通过选择权从后往前找的， 这样做的目的是加快CSS解析速度，从后往前，排除法

浏览器解析css选择器的规则