图解CSS3核心技术与案例实战（第二章 CSS3选择器）

【注意】代码练习在：E/AjaxGGW/图解CSS3/CSS3选择器

1.css3选择器新增了属性选择器、伪类选择器、过滤选择器，减少了在开发中对HTML类名或者ID名的依赖，以及对HTML元素的结构依赖，使得编写代码更加简单轻松。
2.根据所获取页面中的元素的不同，把CSS3选择器分为五大类，如下图：

3.ID选择器具有唯一性。

4.层次选择器
通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系。
① 后代选择器（E F）：选择匹配的F元素，且匹配的F元素被包含在E元素中，不管是子元素、孙元素甚至更深的关系，均被选中
② 子选择器（E>F）：选择匹配的F元素，且匹配的F元素是所匹配的E元素的子元素
③ 相邻兄弟选择器（E+F）：选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
④ 通用选择器（E~F）：选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

5.动态伪类选择器
动态伪类只有在用户和网站交互的时候才能体现出来。分为两类：
① 在链接中常看到的锚点伪类
② 用户行为伪类

6.目标伪类选择器
目标伪类选择器 “：target”，用来匹配URL中某个标志符的目标元素。

7.语言伪类选择器
可以使用它来根据不同语言版本来设置页面的字体风格，根据元素的语言编码匹配元素，这种语言信息必须包含在文档中，或者与文档相关，不能从CSS指定。为文档指定语言，有两种方法可以表示
① 如果使用HTML5，直接设置文档的语言


②手工在文档中指定lang属性，并设置对应的语言值

用法： E：lang(language) 表示选择匹配E的所有元素，且匹配元素指定lang属性，而且其值为language

8.UI元素状态伪类选择器
主要用于form表单元素上，以提高网页的人机交互、操作逻辑以及页面的整体美观。
语法：
E:checked 选中状态
E:enabled 启用状态
E:disabled 不可用状态

9 结构伪类选择器
所有的结构伪类都是基于HTML文档树的。
语法：
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E:root 匹配元素E所在文档的根元素，在HTML文档中，根元素始终是html
E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点

CSS3美化表格有问题？？？

10.否定伪类选择器
：not() 类似jQuery的 ：not（）选择器，主要用来定位不匹配该选择器的元素
11.伪元素
伪元素可用于定位文档中包含的文本，但无法在文档数中定位
为什么使用两个冒号？主要是用来区分伪类和伪元素
① ::first-letter 用来选择文本块的第一个字母
② ::first-line 用来匹配元素的第一行文本
（①和②常用于文本排版）
③ ::before
④ ::after
⑤ ::selection 用来匹配突出显示的文本，浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，接受两个属性，一个是background，另一个是color

12.属性选择器
①E[attr] 选择匹配具有属性attr的E元素，其中E可以省略，表示选择定义了 attr属性的任意类型元素
E[attr = val] 选择匹配具有属性attr的E元素,，并且属性值为val，其中E可以省略，表示选择定义了attr==val的任意类型元素

② CSS3中常见的通配符（类似正则表达示）
^ 匹配起始符
$ 匹配终止符
* 匹配任意字符