CSS3笔记_html/css_WEB-ITnose

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)
根据元素的语言编码匹配元素，为文档指定语言有两种方法：

• 直接设置文档的语言
  
  

• 手工在文档中指定lang属性
  

UI元素状态伪类选择器

E:checked选中状态
E:enabled启用状态
E:disabled不借用状态

结构伪类选择器

语法
E:first-child选择E的第一个子元素
E:last-child选择E的最后一个子元素
root选择文档根元素，即html
E F:nth-child(n)选择父元素E的第n个子元素F，n可以使整数、关键字(even、odd)，公式(2n+1、-n+5)，n的初始值为1
E F:nth-last-child(n)与上面作用机制相同，但顺序相反
E:nth-of-type(n)选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)与上面作用机制相同，但顺序相反
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E: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的值为多个空格分隔的值，其中一个为val
E[attr*=val]选择具有attr属性的E元素，且attr的值的任意位置包含了val字符串；
E[attr^=val]选择具有attr属性的E元素，且attr的值为以val开头的任意字符串；
E[attr$=val]选择具有attr属性的E元素，且attr的值为以val结尾的任意字符串；

附注：'^'匹配起始符'$'匹配终止符'*'匹配任意字符