CSS3知识点总结
一.新增选择器
1.兄弟选择器
E+F 紧挨着E选择器后的那一个F选择器
E~F E选择器后的所有的F选择器
2.属性选择器
[属性名a] 含有属性名a的选择器
例如:[class] {} 含有类的选择器都能被选中(不管它的类值是什么)
[属性名a=属性值a] 选择所有属性名a的值是属性值a的选择器 属性值只有一个
例如:[class=box]{} 含有class类,并且类值必须是box 并且只能是box 严格
[属性名a~=属性值a] 选择器所有属性名a的值是属性值a的选择器 属性值可有多个
例如:[class~=box]含有class类,只要类叫box就行 可以有多个类
[属性名a^=属性值a] 选择器所有属性名a以属性值a开头的选择器
例如:[class^=box]类的值必须以box开头 例如.box1 .boxa
[属性名a$=属性值a] 选择器所有属性名a以属性值a结尾的选择器
例如:[class$=box]类的值必须以box结尾 例如.abox .cbox
[属性名a*=属性值a] 选择器所有属性名a的值含有属性值a的选择器
例如:[class*=box]类的值只要含有box三个字母 例如.abox .cboxa
二.伪类和伪元素
1.伪类
:nth-child(n)
:nth-child(even) 第偶数个
:nth-child(odd) 第奇数个
:nth-of-type(n)
2.伪元素
::after
::before
三.阴影
1.文本阴影
text-shadow:值1 值2 值3 值4
多重阴影:
text-shadow:值1 值2 值3 值4 , 值1值2 值3 值4 ,值1值2 值3 值4 ,....
值1:必需的 水平阴影 为正往右投影 为负往左投影
值2:必需的 垂直阴影 为正往下投影 为负往上投影
值3:可选 阴影的模糊距离
值4:可选 阴影的颜色 默认黑色
2.盒子阴影
box-shadow:值1值2 值3 值4 值5 值6;
值1:必需的 水平阴影 为正往右投影 为负往左投影
值2:必需的 垂直阴影 为正往下投影 为负往上投影
值3:可选 阴影的模糊距离
值4:可选 阴影的扩展半径
值5:可选 阴影的颜色 默认黑色
值6:可选 投影方式 默认外投影 如果设置为inset 则为内投影