按照计划，重新学前端已经把JS和HTML+CSS2的排版又学了一次，从小米页面到专业的用PS切图量距离做京东页面，感觉技术又纯熟了一些。现在是应该好好看看CSS3了，大概前端里到现在为止还没有系统学习过的，就是CSS3了。而且借此机会，正好把购买已久的一本好书《图解CSS3核心技术与案例实战》仔细过一遍。这样咱至少也对得起下边这张图。前端技术

CSS3 选择器

用好选择器，操作元素样式不用愁。CSS3里一共有10种选择器：

基本选择器
层次选择器
动态伪类选择器
目标伪类选择器
语言伪类选择器
UI元素状态伪类选择器
结构伪类选择器
否定伪类选择器
伪元素
属性选择器

其中3-8都是伪类选择器，下边一个个来看。

基本选择器

基本选择器就是CSS1里最基本的选择器：

**基本选择器**
选择器	类型	功能描述
*	通配选择器	选择文档中所有的HTML元素
Tag	元素选择器	选择指定的类型的HTML元素
#Id	ID选择器	选择ID属性值为某个值的任意类型元素，页面内只能有一个
.class	类选择器	选择指定class属性为某个值的所有HTML元素
selector1, selector N	群组选择器	各个选择器的并集

这里唯一一个需要注意的是以前很少使用的多类名选择器：

.item.important {
    background-color: red;
}

基本选择器的浏览器兼容情况非常好，所有浏览器都支持。

这个表示选择一个元素，同时属于item 和 important 类。注意，多类名选择器是写在一起的，中间没有空格，否则变成后代选择器。

所以只要将选择器连写，就表示在同一个元素上同时具备的条件，比如 ul.block 表示选择所有block类的UL元素。不属于block类的UL标签和不是UL标签的其他block类成员都不会被选中。

层次选择器

**层次选择器**
选择器	类型	功能描述
E F	后代选择器	选择E后代中所有匹配F的元素
E>F	子选择器	选择E的子元素中匹配F的元素
E+F	相邻兄弟选择器	E之后紧挨的匹配F的元素，也就是E的下一个兄弟元素
E~F	通用选择器	E后边所有同级元素中匹配F的元素

这里的大写的 E 和 F 表示选择器，而不是固定的某个HTML元素，下同。

层次选择器属于CSS2，只有IE 6不支持，反正也淘汰了，层次选择器也可以放心使用。

动态伪类选择器

动态伪类并不存在于HTML中，只有交互的时候才能体现出来

**动态伪类选择器**
选择器	类型	功能描述
E:link	链接伪类选择器	E必须含有锚点，而且是未被访问过的链接
E:visited	链接伪类选择器	E必须含有锚点，而且已经被访问过。
E:active	用户行为伪类选择器	E被激活，常用于锚点和按钮
E:hover	用户行为伪类选择器	鼠标停留在E上
E:focus	用户行为伪类选择器	匹配的元素获得焦点

该部分伪类属于CSS2，兼容性也很好，只有IE7及以下不兼容，可以放心使用。

该伪类也可以写出很复杂的行为，比如鼠标移动到父元素上，让其属性或者某个子元素改变样式，可以与层级选择器搭配使用，写成例如：

.main:hover li.second {color:"red"}

目标伪类选择器

目标伪类选择器只有一个，就是 :target，用来匹配文档的URI中某个标识符的具体元素。也就是URI的#号后边标识符对应的元素。

前边都是在复习CSS1和2的选择器，现在这个是真正的CSS3选择器，是一个动态选择器，只有URI内存在#的标识符的时候，样式效果才会生效。

浏览器兼容性也比较好，只有IE9之前的版本不支持。

target元素的作用在于着重描述当前部分，比如在一个页面内点击了锚点，如果锚点设置了合理的#标识符，就可以对该锚点采取样式。经常用在高亮显示区块，从相互层叠的盒子或图片中突出显示其中一项，tabs效果，幻灯片效果，灯箱效果，相册效果等。当然有些东西还是用JS实现比较好。

用target 实现简单的点击某个部分就打开，其他部分隐藏的效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 300px;
            margin: 0 auto;
        }

        div {
            width: auto;
            background-color: #aaa;
            color: navy;
            border: 1px solid #ccc;
        }
        ul {
            display: none;
            list-style: none;
        }
        ul:target {
            display: block;
        }

        a {
            text-decoration: none;
            color: #fff;
        }
    </style>

</head>
<body>
<div>
    <a href="#111">第一段</a>
    <ul id="111">
        <li>第一段的内容</li>
        <li>第一段的其他内容</li>
    </ul>
</div>
<div>
    <a href="#222">第二段</a>
    <ul id="222">
        <li>第二段的内容</li>
        <li>第二段的其他内容</li>
    </ul>
</div>
<div>
    <a href="#333">第三段</a>
    <ul id="333">
        <li>第三段的内容</li>
        <li>第三段的其他内容</li>
    </ul>
</div>
</body>
</html>

语言伪类选择器

语言伪类选择器用来匹配语言，特别是国际化的网站，非常有用。

语言伪类选择器需要在HTML标签或者body标签中设置 lang 属性和对应的语言值。浏览器会对一些标签格式做自动转换。需要手动转换的地方，则可以设置语言伪类样式：例子如下：

:lang(en) {
    quotes: '"' '"';
}

:lang(fr) q {
    background-color: red;
}

当HTML的lang属性改变的时候，就可以改变样式，通常用在多语种的网站中，先做好整体模板，然后根据语言来进行本地化。

UI元素状态选择器

UI元素主要指的是可交互元素，也就是表单元素

**UI元素状态选择器**
选择器	类型	功能描述
E:checked	选中状态伪类选择器	选中的复选按钮或者按钮表单元素
E:enabled	启用状态伪类选择器	启用的表单元素
E:disabled	不可用状态伪类选择器	不可用的表单元素

该部分兼容性也不错，IE9及以上都支持。

这里要注意的是，E:enabled 不需要在元素上设置disabled属性（也就是默认）就可以选中，而E:disabled则必须在元素上设置disabled属性才能被选中。

结构伪类选择器

结构伪类选择器是基于DOM模型的，本质是为了更方便的通过HTML结构来选择元素，可以减少用ID定位元素，保持结构清晰整洁。

结构伪类选择器是CSS3选择器的核心，一定要掌握而且灵活使用

**结构伪类选择器**
选择器	功能描述
E:first-child	是第一个子元素，然后需要符合E条件，并不表示E的第一个子元素。如果想找UL里边的第一个子元素，那么要写成 `ul :first-child`，如果要找ul里边的第一个li子元素，就要写成 `ul li:first-child`
E:last-child	是最后一个子元素，然后还需要符合E条件，注意并不表示E的最后一个子元素
E:root	选择E所在文档的根元素，也就是HTML元素，等于直接通过标签名选 html
E F:nth-child(n)	选择父元素E的第n个子元素，这个子元素还必须符合F条件，n可以是整数，even，odd或者是公式，最小值是1。这种都是要全部匹配才行，比如E的第n个子元素如果不符合F的条件，就选不到。
E F:nth-last-child(n)	选择父元素E的倒数第n个子元素F，n的规则与上边相同，最小是1，表示最后一个元素。
E:nth-of-type(n)	这个比nth-child这种适用更广泛，这个意思就是作为子元素的所有符合E条件的挑出来，再从里边选第二个
E:nth-last-of-type(n)	nth-of-type的倒数版本
E:first-of-type	符合E类型的子元素里的第一个
E:last-of-type	符合E类型的子元素里的最后一个
E:only-child	唯一一个匹配E的子元素
E:only-of-type	唯一一个匹配E的元素
E:empty	没有子元素也不包含文本节点的元素

除了 :first-child 是CSS2.1的规范以外，其他的都是CSS3新特性，一定要仔细掌握。

其实结构选择器主要就是两大类，选child 和选 type，这两者之间的区别就是 child 必须要是子元素的指定位置还要符合条件，等于先挑位置再匹配元素。而 type 是先把子元素里所有符合条件的挑出来，再去选其中的次序。具体解释看这里。

搞清楚了选择器本身的作用以外，剩下的就是参数n的使用方法，n的使用方法关键记住n单独使用，第一个元素的位置就是1；在公式里，浏览器就会从0开始增加：

**参数n的使用**
n的类型	解释
字符n	直接写字符n表示选择全部
整数	表示第几个元素，1表示第一个元素，0表示不进行匹配。不能为负数。
表达式	在所有表达式中，实际上浏览器会自动将n从0开始不断增加，然后用计算后的结果进行匹配
	n*length	n从0开始计算，这个是选中所有以length为步长，从第一个length长度开始的元素
	n+length	这个是选择第length个及之后的元素
	-n+length	这个是选择第length个及之前的元素
	n*length+b	这个用于选择从第一个元素开始步长为length的元素，长用于选固定间隔的元素。
	odd	第奇数个元素，即1,3,5,7...
	even	第偶数个元素，即2,4,6,8...

结构选择器应用很广泛，IE9及以上浏览器都支持，兼容性不错。这里还需要注意的是n+6这种不能写成6+n，不然没有效果。必须n在前边。

否定伪类选择器

否定伪类选择器只有一个，相当于逻辑上的not，写法是 E:not(F)，表示E选择器的结果里不符合F选择器的元素。

否定伪类选择器搭配其他选择器，就像布尔运算一样非常灵活的使用。

IE9及以上浏览器都支持，兼容性不错。

伪元素

在之前的CSS1和CSS2中，已经有伪元素的存在，CSS3中对伪元素进行了调整，采用了两个冒号，为区分伪类和伪元素。现代浏览器对于伪元素同时支持1个和2个冒号，但为了按照规范，还是尽量采用2个冒号比较好。

**伪元素**
伪元素	解释
::first-letter	用来选择一个元素之内文本块的第一个字母。通常用于给文本元素添加排版细节，比如下沉首字母
::first-line	匹配元素的第一行文本
::before	这个指不存在于标记中的内容，可以插入额外位内容的位置。实际上相当于一个指向第一个子元素空白位置的指针，需要配合content属性来设定实际插入什么东西，然后为其设置样式。
::after	和::before一样，插入的东西成为这个选择器的最后一个子元素。
::selection	这个指的是被选中高亮的文本，一般浏览器的选择文本的时候底色是蓝色，文字为白色显示。这个伪类就用来修改被高亮的文本的样式。在使用的时候前边不需要加选择器，直接使用 `::selection {}`

这里经常用来进行特殊操作的就是::after和::before两个伪元素。典型的给E清除浮动的方法如下：

E::after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}

属性选择器

CSS3在CSS2的属性选择器上增加了一些，但是还是一起来看看全部的属性选择器吧：

**属性选择器**
属性选择器	解释
E[attr]	用来选择具备该属性名的元素，E可以省略，就表示所有具备该属性名的元素。
E[attr=val]	表示选择该属性名=值的元素。这个选择器的值必须完全匹配，像CSS有多个类名的这种，必须全部匹配，只匹配其中一个词的不能用这个选择器。
E[attr^=val]	属性以val开头的值匹配的元素。
E[attr~=val]	这个表示attr对应的属性里，有多个空格分割的值，其中一个等于val，经常用来选择CSS类。
E[attr*=val]	这个指attr的值里，任意部分包括val值,类似于查找字符串，找到就算选中
E[attr$=val]	尾部包含val值。
E[attr\|=val]	属性值具有val 或者以 `val-` 开头的值。注意，val后边多出一个"-"号用于匹配。看一个例子即可知道

最后一个选择器举一个例子：

ul [class|=cls] {
    background-color: red;
}

<ul class="ul">
    <li class="cls-ear">1</li>
    <li class="cls-head">2</li>
    <li>3</li>
    <li class="c-lv cls">4</li>
    <li>5</li>
    <li class="cls">6</li>
    <li class="dear">7</li>
    <li class="clsear">8</li>
    <li>9</li>
    <li>10</li>
</ul>

这个选择器会选择1,2,6，如果用ul [class^=cls]则会选择1,2,6,8，可以理解这两个选择器的区别了。