CSS优先级&选择器&定位
选择器
1.层级选择器
后代选择器:E1 E2{}
理解:E1后面的所有E2元素
子选择器:E1>E2{}
理解:E1的儿子元素E2
2.伪类选择器(:)
p:first-child{} 选中第一个并且叫p的元素
p:last-child{} 选中最后一个并且叫做p的元素
p:nth-child(n|2n|2n+1|5n|...) n代表0,1,2,3...
3.伪元素(::)
::before -- 在元素之前添加
::after -- 在元素之后添加
小结:以上两个伪元素都是行内元素,和你添加的标签是父子关系
注意:写的时候,必须和content来配合使用
::placeholder -- 修改输入框的默认提示文字颜色
::first-letter -- 文本的第一个文字
::first-line -- 文本的第一行
::selection -- 用户选中效果
定位(position)
理解:把某个元素摆放在指定的位置
语法:position:related | absolute | fixed;
相对定位 -- related
理解:相对于自己本来的位置进行偏移;
特征:不会脱离文档流,原位置保留
绝对定位 -- absolute
理解:
情况一:最近的父元素没有定位,那么就参照浏览器边缘进行定位;
情况二:最近的父元素有定位,那么参照最近的父元素来进行定位;
特征:会脱离文档流,原地升仙;
会随着滚动条滚动而滚动;
固定定位 -- fixed
理解:以浏览器边缘为基准进行定位;
特征;会脱离文档流,原地升仙;
不会随着滚动条滚动而滚动;
定位技巧:
子绝父"相"
理解:子元素是绝对定位,而父元素可以是3种定位中的任意一种,通常情况:子绝对,父相对
层次:
语法:z-index:层数;
注意:必须结合我们的3个定位来进行使用;为数值不加单位
继承:
理解:子元素拥有父元素的样式;
哪些:文本相关的/列表相关;
优先级
优先级相同的情况,那么遵循就近原则;
优先级不同的情况,那么进行权值的累加(注意:10个类名也干不过1个id)
优先级权值:
!important > 行内样式 > id选择器 > class选择器 > 标签选择器
无穷大 1000 100 10 1