选择器：属性选择器、伪类选择器、伪元素选择器
属性选择器：属性是相对于标签而言，所谓属性选择器就是根据指定名称的属性的值来查找元素
e.g
1.E[attr]：查找指定的拥有attr属性的E标签，如查找拥有style属性的li标签
li[style]{ text-decoration：underline；}
2.E[attr=value]:查找拥有指定的attr属性并且属性值为value的E标签，如查找拥有class属性并且值为red的属性值
li[class=red]{font-size:30px;}
3.E[attr*=value]:查找拥有指定的attr属性并且属性值中包含（可在任意位置）value的E标签
4..E[attr^=value]:查找拥有指定的attr属性并且属性值value开头的E标签
5,。E[attr$=value]:查找拥有指定的attr属性并且属性值value结束的E标签
伪类选择器：
1.兄弟伪类：+：获取当前元素的相邻的满足条件的元素
（1）相邻的
（2）必须是指定类型的元素
~：获取当前元素的满足条件的兄弟元素（必须是指定类型的元素就行）
2.相对于父元素的结构伪类：
E：first-child：查到E元素的父级元素中的第一个E元素
（1）相对于当前指定元素的父元素
（2）查找到 类型必须是指定的类型
E：last-child：查到E元素的父级元素中的最后一个E元素
查找的时候限制类型：
li：first-of-type{color：red；}
指定索引位置：（even：偶数；odd：奇数）
li：nth-child（5）{background：red；}
限定类型：
li：nth-child-of-type（even）{background：red；}
只改变前面五个的样式：
li：nth-child-of-type（-n+5）{background：red；}
空值：没有任何元素
li：empty{background：red；}
3.伪类样式target：
E：target：可以为锚定目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式
4.伪元素选择器
E：：before（在一个元素的内容之前插入content属性定义的内容和样式）
（1）行内元素，如果要设置宽高则需要抓换成：display：block
（2）必须添加content，哪怕不设置内容，也要添加content：""
：伪类 ：：伪元素
E：：after（在一个元素的内容之后插入content属性定义的内容和样式）
注意点：
（1）要加content
（2）要转换成块级元素display：block；
（3）要加定位，父级：position：relative；子级：position：absolute；
E：：first-letter：获取第一个字内容
e.g p::first-letter{font-size：30；float：left} --------实现首字下沉
E：：first-line：获取第一行内容
注意：如果设置了first-letter，就没办法设置first-line（优先级）
P：：selection（设置当前选中内容的样式，但是只能设置显示的样式，不能设置内容大小）
p：：selection{background:red;}
5.颜色设置：颜色是六位的16进制数0~255
rgb（红，绿 ，蓝）
HSLA（颜色（0~360），饱和度（0%~100%），明度：（0%~100%）） 明度默认是50%
h：色调 / s:饱和度 / l:亮度 / A:透明度
色度
h5中颜色设置：
background-color：rgba（255,0,255,0.2）
6.文件阴影：
原理
length值
单层阴影：
text-shadow：-2px -2px 5px red；
多层阴影：
text-shadow：-2px -2px 5px red，2px 2px 3px blue；
7.盒模型：
box-sizing：
content-box：你设置的width属性值仅仅是内容的宽度，盒子的最终宽高值在width的基础上再加上padding和border的宽度
border-box：你设置的width属性值就是盒子的最终的宽度，包含了border和padding和内容，如果添加了padding和border，那么真正放置内容的区域就会减少，但是它可以用来稳固页面的结构
box-sizing：boder-box；
8.边框圆角
border-radius：
1个值：四个角
2个值：左上，右下 / 右上，左下
3个值：左上 / 右上，左下 / 右下
4个值：左上 / 右上 / 右下 / 左下
网友评论