CSS3知識(shí)點(diǎn)總結(jié)

一．新增選擇器

1.兄弟選擇器

E+F????緊挨著E選擇器后的那一個(gè)F選擇器

E~F ???E選擇器后的所有的F選擇器

2.屬性選擇器

[屬性名a] ??????含有屬性名a的選擇器 ?

例如：[class] {}??????含有類的選擇器都能被選中（不管它的類值是什么）

[屬性名a=屬性值a] ???選擇所有屬性名a的值是屬性值a的選擇器 ?屬性值只有一個(gè)

例如：[class=box]{}?????含有class類，并且類值必須是box 并且只能是box ?嚴(yán)格

[屬性名a~=屬性值a] ??選擇器所有屬性名a的值是屬性值a的選擇器 ??屬性值可有多個(gè)

例如：[class~=box]含有class類，只要類叫box就行 ?可以有多個(gè)類

[屬性名a^=屬性值a] ??選擇器所有屬性名a以屬性值a開頭的選擇器

例如：[class^=box]類的值必須以box開頭 例如.box1 ?.boxa

[屬性名a$=屬性值a] ??選擇器所有屬性名a以屬性值a結(jié)尾的選擇器

例如：[class$=box]類的值必須以box結(jié)尾 例如.abox ?.cbox

[屬性名a*=屬性值a] ??選擇器所有屬性名a的值含有屬性值a的選擇器

例如：[class*=box]類的值只要含有box三個(gè)字母 例如.abox ?.cboxa

二．偽類和偽元素

1.偽類

:nth-child(n)

:nth-child(even)????第偶數(shù)個(gè) ??

:nth-child(odd)????第奇數(shù)個(gè)

: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：必需的 ?水平陰影 ?為正往右投影 為負(fù)往左投影

值2：必需的 ?垂直陰影 ?為正往下投影 為負(fù)往上投影

值3：可選 ???陰影的模糊距離

值4：可選 ???陰影的顏色 ??默認(rèn)黑色

2.盒子陰影

box-shadow:值1值2 ??值3 ?值4 ?值5 ?值6;

值1：必需的 ?水平陰影 ?為正往右投影 為負(fù)往左投影

值2：必需的 ?垂直陰影 ?為正往下投影 為負(fù)往上投影

值3：可選 ???陰影的模糊距離

值4：可選 ???陰影的擴(kuò)展半徑

值5：可選 ???陰影的顏色 ??默認(rèn)黑色

值6：可選 ???投影方式 ??默認(rèn)外投影 ??如果設(shè)置為inset 則為內(nèi)投影