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]` |
| 伪类选择器 | 示例 | 描述 |
|---|---|---|
| :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 | 在每个 元素的内容之后插入内容。 |