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引入的样式。

最后

以上就是淡定樱桃为你收集整理的css选择器优先级 样式表优先级的全部内容，希望文章能够帮你解决css选择器优先级 样式表优先级所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。