css选择器优先级 样式表优先级

css三大特性:

继承
优先级
层叠

css选择器优先级
选择器 权重
通配符 0
标签名,伪元素 1
类/伪类/属性 10
ID 100
行内样式 1000
important 1/0(无穷大)
总结排序:
!important > 行内样式 > ID > 类、伪类、属性 > 标签名,伪元素 >通配符> 继承>浏览器默认属性
css样式表优先级

使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式。内部样式的优先级别是高于外部样式的。
如果存在一个style标记:

行内样式 > 嵌入样式 > 导入样式

若存在链接式,根据style与link出现的顺序;
如果是heade中存在多个style标记:

那么这些样式的先后顺序决定了优先级别,而同一 个style内部,才会遵循嵌入样式优先于导入样式的规则。

参考学习https://www.cnblogs.com/liweitao/p/3623129.html

优先级特点:
1.继承的权重为0
2.权重会叠加。

css基本选择器

ID 选择器, 如 #id{}
类选择器, 如 .class{}
属性选择器, 如 a[href="segmentfault.com"]{}
伪类选择器, 如 :hover{}
伪元素选择器, 如 ::before{}
标签选择器, 如 span{}
通配选择器, 如 *{}

复合选择器:
交集选择器:标签+类(ID)选择器{属性:值}
并集选择器:选择器,选择器,选择器{属性:值}
后代选择器:选择器+空格+选择器{属性:值}
子代选择器 :选择器>选择器{属性:值}

link与import的区别
区别
1.从属关系区别
@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

2.加载顺序区别
加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。

5.权重区别(该项有争议,下文将详解)
link引入的样式权重大于@import引入的样式。

原文地址:https://www.cnblogs.com/princeness/p/11664988.html