一.特殊的上下文选择符
上下文选择符以空格作为分隔符，分组选择符以逗号作为分隔符
上下文选择符选择的是所有符合条件的后代元素（包括直接后代和间接后代元素）
1.子选择符 >
标签1 > 标签2
//标签2必须是标签1的子元素
//反过来，标签1必须是标签2的父元素而不是其他祖先元素
2.紧邻同胞选择符 +
标签1 + 标签2
//标签2必须紧跟其同胞标签1的后面
//标签2只代表同胞的第一个元素
3.一般同胞选择符 ~
标签1 ~ 标签2
//标签2必须跟（不一定紧跟）在其同胞标签1后面
//标签2只代表同胞的所有满足条件的元素，不包括其他子元素
如
<h2>An H2 Heading</h2>
<p>This is paragraph 1</p>
<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
<a href="#">Link</a>
//h2 ~ a {color: red;} 只影响Link链接，而不影响a link链接。
4.通用选择符 *
1、* {color: red;} //匹配任何元素
2、p * {color: red;} //p包含的所有元素
3、section * a {color: red;} //任何是section孙子元素，而非子元素的a标签（非子选择符）
如
<section>
<h2>An H2 Heading</h2>
<p>This is paragraph 1</p>
<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
<a href="#">Link</a>
</section>
//2选中的是a link，而非p里面的其他直接文本节点。
//3选中的是a link元素，而非Link元素。
二.伪类
一个冒号表示伪类，两个冒号表示css3新增的伪元素
1、UI（用户界面）伪类
在HTML元素处于某个状态时，为该元素应用css样式
链接伪类
a:link {} //链接初始状态
a:visited {} //点击过的链接（用稍浅一些的颜色）
a:hover {} //悬停时的链接
a:active {} //链接正在被点击（鼠标在元素上按下，还没有释放）
//必须按照以上顺序使用
//巧记：“LoVe？HA！”
:focus伪类
e:focus //e代表任何元素
input:focus {border: 1px solid blue;}
//表单中的文本字段在用户单击时获得焦点，此时添加一个蓝色边框
:target伪类
e:target //用户点击指向页面中其他元素的链接，那个元素就是目标，用:target选中它
<a href="#more">more information<a>
<h2 id="more">this is the information you are looking for</h2>
#more:target {background: #eee;}
//单击链接，转向h2元素，为h2元素添加样式。
2、结构化伪类
根据标记的结构应用样式
e:first-child //一组同胞元素中的第一个元素
e:last-child //一组同胞元素中的最后一个元素
e:nth-child(n) //一组同胞元素中的第几个元素
e:nth-child(odd/even) //一组同胞元素中的奇数或偶数元素
三.伪元素
e::first-letter //元素的第一个字符（用于首字符放大效果）
e::first-line //元素的第一行（长度随浏览器窗口大小的变化而改变）
e::before //在元素前面添加内容
e::after //在元素后面添加内容
<p>25<p>
p::before {content: "age: ";}
p::after {content: " years.";}
//age: 25 year.(注意添加空格)