CSS3新增选择器
1 什么是CSS3
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效（阴影）、多栏布局（display:flex）、2D3D和动画等模块
2 CSS选择器
| 选择器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
.class | .intro | 选择 class="intro" 的所有元素。 | 1 |
#id | #firstname | 选择 id="firstname" 的所有元素。 | 1 |
* | * | 选择所有元素。 | 2 |
element | p | 选择所有 <p> 元素。 | 1 |
element,element | div,p | 选择所有 <div> 和 <p> 元素。 | 1 |
element element | div p | 选择 <div> 元素内的所有 <p> 元素。 | 1 |
element>element | div>p | 选择父元素为 <div> 的所有 <p> 元素。 | 2 |
element+element | div+p | 选择紧接在 <div> 元素后的所有 <p> 元素。 | 2 |
[attribute] | [target] | 选择带有 target 属性的所有元素。 | 2 |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 “flower” 的所有元素。注意：title= ”flower red” 不能使用了 | 2 |
[attribute|=value] | [class|=box] | 选择 class 属性值以 “box” 开头(后面如果有字符，必须为-)的所有元素。 | 2 |
| 伪类选择器 | 示例 | 描述 |
|---|---|---|
| :link | a:link | 选择所有未被访问的链接。 |
| :visited | a:visited | 选择所有已被访问的链接。 |
| :active | a:active | 选择活动链接。 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 |
| :focus | input:focus | 选择获得焦点的 input 元素。（IE8及以上才支持） |
| :first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 |
| :first-line | p:first-line | 选择每个 <p> 元素的首行。（加边框不行，字号可以） |
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个<p>元素。 |
| :before | p:before | 在每个 <p> 元素的内容之前插入内容。 |
| :after | p:after | 在每个 元素的内容之后插入内容。 |
