选择器 定位 伪元素 继承 优先级
1.选择器相关:
基本选择器:
*{通用选择器}
p{标签选择器}
.类名{类选择器}
#id名{id选择器}
E1,E2{分组选择器}
层次选择器:
E1 E2{后代选择器}
E1>E2{子选择器}
伪类选择器:
E:first-child{第一个子元素并且叫什么名字的}
E:nth-child(n|2n|2n+1|6n)
E:last-child{最后一个子元素并且叫什么名字}
2.伪元素:
::before -- 在元素之前添加
::after -- 在元素之后添加
注意: 伪元素是行内元素,和标签之间是父子关系
::placeholder
::first-letter
::first-line
::selection
3.继承:
理解:子元素拥有父元素的样式
哪些:文本相关 列表ul
4.优先级:
原则:就近原则 权值累加
权值: !important > 行内 > id > class > 标签
无穷大 1000 100 10 1
5.定位:
相对定位: relative
理解:相对于自己本来的位置进行偏移
特征:不会脱离文档流,原位置会保留
绝对定位: absolute
特征:会脱离文档流,原地升仙,会随着滚动条的滚动而滚动
情况一:当父级元素没有定位的情况下,参照浏览器边缘进行定位
情况二:当最近的父级元素有定位,那么就参照最近的父级元素来定位
固定定位: fixed
特征:会脱离文档流,原地升仙,不会随着滚动条的滚动而滚动,参照浏览器边缘进行定位
场景:小广告
定位技巧: 子绝父"相"(子元素一定要是绝对定位,父元素可以是3种定位方式中的任何一种)
层级:
语法: z-index:n;
注意: 层级高的会覆盖层级低的;
不加单位
必须结合定位使用
推荐阅读:
扫描二维码,在手机上阅读