CSS优先级&选择器&定位

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