2018-07-31

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 则为内投影