css 选择器 及 层叠规则 ——场景整理
废话不多说，先来上波图！！！看不清点开看哟
选择器类型（color为例）
上边的图看的清吗？点开更清楚！
基本选择器
-
通配选择器
*{color:red}
-
标签选择器
p{color:red}
-
类选择器
.class-red{color:red}
-
id选择器
#id-red{color:red}
-
属性选择器
-
属性名选择
input[name]{color :red}
-
属性值选择
input[type = 'text']{color:red}
-
部分属性值
-
input[name ^= 'data' ]{color:red}- 以data开头
-
input [name $= 'data']{color:red}- 以data结尾
-
input[name *= 'data ']{color :red}- 包含data
-
input[name ~= 'data ']{color :red}- 以空格隔开后有data
-
input[name |= 'data ']{color :red}- 以data开始或为data
-
-
关系选择器
-
后代选择器
-
div p{ color:red}- div的所有后代p,包含所有子孙元素
-
-
子选择器
-
div > p{color:red}- div的子代元素p，不包含孙子元素
-
-
相邻选择器
-
div + p{color:red}- 匹配div之后的相邻兄弟元素p,div和p需要相邻
-
-
兄弟选择器
-
div ～ p{color:red}- 匹配div之后的所有兄弟元素p,
-
伪选择器
-
伪类选择器
-
链接伪类
a:link{},a:visited{},a:hover{},a:active{}
-
位置伪类
-
p;first-child{},p:first-of-type{},p:nth-child(n){}
…
-
-
表单伪类
-
input:check{},input:disabled{}
…
-
-
-
伪元素选择器
p::first-letter{},p::first-line{}p::before{},p::after{}- …
选择器层叠规则
概念
- 层叠是处理样式的过程。合并不同源的css规则，根据特殊算法得出最终样式以应用，在以下说明中，4.n>3.n>2.n>1.n>0.n 当样式发生冲突时，层级高的被渲染
不同方面
-
4.0重要性（!important）
- 4.1重要的作者样式
- 4.2重要的用户样式
-
来源
-
3.0开发编写样式
-
特殊性
-
3.n （n可以用权重计算的
十进制代替，本意是高位
特殊性更高）-
权重解释
-
内联样式1000
-
非内联样式
-
ID选择器0100
-
class选择器、属性选择器、伪类选择器0010
-
标签选择器、伪元素选择器0001
-
关系选择器中的～+>等等 0000，
但比没有特殊性强 -
继承
-
隐式继承（无代码，自动继承字体、颜色等）
- 没有特殊性
-
显式继承（有代码控制）
- 有特殊性 0000，
与无特殊性产生冲突时胜出
- 有特殊性 0000，
-
-
-
-
权重计算
-
根据当前选择器用到了哪些类型的权重以及使用的次数进行相加
-
例子
#header .classtop a{} 0111.class1 .class2 ul li{} 0022<a style = 'color:red'></a> 1000
-
-
-
-
-
2.0用户设置样式
-
1.0设备默认样式
-
-
0.0顺序
- 来源重要性特殊性均相同时，按照选择器在样式表中的顺序决定，后边的会覆盖前边。也就是后边的权重高,0.n中的n值大
下边真的可以不看 -----
想学习一些前端的书籍吗，我都帮你整理好啦！评论打出你想读的书，给你最全的笔记干货
超级全的前端知识，面试必备、系统复习必备哟哟哟
有想法评论提出哈，欢迎交流，小编也是渣渣一枚呢～一起进步呗
这次真的可以不看 -----
点个收藏呗，要不赞一个呗，小编手都敲累了，但还是持续加更呢～