CSS3笔记
CSS3
一、CSS3选择器
基本选择器
*通配符选择器；body，div元素选择器；#idID选择器；.class类选择器；selector1,selector2群组选择器层次选择器
E F后代选择器，选择F元素且F被包含于E元素；E>F子选择器，选择F元素且为E的子元素；E+F相邻兄弟选择器，选择F元素紧邻匹配的E元素；E~F通用选择器，选择E后所有匹配F的元素；动态伪类选择器
E:link、E:visited链接伪类选择器；E:active、E:hover、E:focus用户行为选择器；目标伪类选择器
E:target选择匹配E的元素，且匹配元素被相关url指向
即点击某个链接后，所选元素E的样式可以改变，效果类似进入知乎特定答案链接，该答案背景闪烁。
除此之外，还可以制作类似手风琴效果，高亮显示区块，tabs，幻灯片，灯箱，相册等效果。语言伪类选择器
E:lang(language)
根据元素的语言编码匹配元素，为文档指定语言有两种方法：直接设置文档的语言
<!DOCTYPE HTML><html lang="en-US">手工在文档中指定
lang属性<body lang="fr">
UI元素状态伪类选择器
E:checked选中状态E:enabled启用状态E:disabled不借用状态结构伪类选择器
语法
E:first-child选择E的第一个子元素E:last-child选择E的最后一个子元素root选择文档根元素，即htmlE F:nth-child(n)选择父元素E的第n个子元素F，n可以使整数、关键字(even、odd)，公式(2n+1、-n+5)，n的初始值为1E F:nth-last-child(n)与上面作用机制相同，但顺序相反E:nth-of-type(n)选择父元素内具有指定类型的第n个E元素E:nth-last-of-type(n)与上面作用机制相同，但顺序相反E:first-of-typeE:last-of-typeE:only-childE:only-of-typeE:empty选择没有子元素的E，且该元素也不包含任何文本节点否定伪类选择器
:not()选择不满足括号中条件的元素，如footer、:hover、type=radio等伪元素
::first-letter用来选择文本块的第一个字母，一般首字母下沉的效果::first-line选择文本块的第一行文本::before、::after不是存在于标记中的内容，表示可以插入额外内容的位置，生成的内容不会成为DOM的一部分，但同样可以设置样式。::selection设置高亮显示的文本，需要设置background和color两个值；
/*webkit,opera9.5+,IE9+*/::selection{ background:blue; color:white;}/*Mozilla Firefox*/::-moz-selection{ background:blue; color:white;}10. ####属性选择器E[attr]选择具有attr属性的E元素，其中E可以省略，表示选择所有定义attr属性的元素，不论类型；E[attr=val]选择具有attr属性的E元素，且attr的值为val(区分大小写)；E[attr|=val]选择具有attr属性的E元素，且attr的值为val或者以val-开头的属性值；E[attr~=val]选择具有attr属性的E元素，且attr的值为多个空格分隔的值，其中一个为valE[attr*=val]选择具有attr属性的E元素，且attr的值的任意位置包含了val字符串；E[attr^=val]选择具有attr属性的E元素，且attr的值为以val开头的任意字符串；E[attr$=val]选择具有attr属性的E元素，且attr的值为以val结尾的任意字符串；
附注：'^'匹配起始符'$'匹配终止符'*'匹配任意字符