《图解CSS3》笔记1 CSS选择器

CSS3从CSS2.1发展而来，CSS3包括了多个模块，W3官网列举了这些模块当前的进展： http://www.w3.org/Style/CSS/current-work

关于各模块成熟度的发展流程如下：（从不稳定->稳定）

WD　　　  Working Draft

LC　　　　Last Call announcement

CR　　　　Candidate Recommendation

PR　　　　Proposed Recommendation

REC　　　 Recommendation

 

两种设计理念：

1. 渐进增强　　　　从保证低版本浏览器的基本内容　　-->　　到高版本的完美体验

2. 优雅降级　　　　从高版本上的完美体验　　　　　　-->　　到低版本的基本内容展现

 

1. Selector 选择器

　　基本选择器　　　　　　　　通配选择（*）、元素选择、ID选择、类选择（IE6不支持多类名选择）、群组选择（多个选择器集合，逗号隔开）

　　层次选择器　　　　　　　　>直接孩子选择、c1 + c2紧随c1其后的c2节点选择、c1 ~ c2 位于c1之后的所有c2选择

　　伪类选择器　　　　　　　　6类

　　　　动态伪类选择器　　　　E:link、E:visited、E:active、E:hover、E:focus选择

　　　　目标伪类选择器　　　　(E):target

　　　　语言伪类选择器　　　　(E):lang(zh)，支持IE8以上；

　　　　UI元素伪类选择器　　　(E):checked、:enabled、:disabled

　　　　结构伪类选择　　　　　(E):first-child、:last-child、:nth-child(n)、:nth-of-type(n)、:first-of-type、:last-of-type

　　　　　　　　　　　　　　　n分为三类情况：1. 整数时从1开始；2. 关键字：odd、even；3. 表达式时，eg：2n，从0开始；

　　　　否定伪类选择器　　　　E :not(F)  E下所有非F的元素，类似于：jQuery(":not(element)")

　　伪元素　　　　　　　　　　针对文本内容的操作，如：::first-letter、::first-line、::before、::after（CSS3中推荐双冒号）

　　　　　　　　　　　　　　　:selection 针对选择文本的样式调整，如：background和color

　　属性选择器　　　　　　　　E[attr^=val]、E[attr&=val] 元素的attr属性值以val开头或结尾

　　　　　　　　　　　　　　　E[attr*=val]　　值包含val字符串

　　　　　　　　　　　　　　　E[attr~=val]　　值用空格分隔的列表中有val元素

　　　　　　　　　　　　　　　E[attr|=val]　　值为val或者val-，比如：[lang|=en]匹配: en和en-US。