CSS选择器的作用是找出某类元素，以便我们使用style元素或者外部样式表对这类元素设置样式。
| 选择器 | 含义 | 演示样例 | 描写叙述 |
|---|---|---|---|
| * | 选择全部元素 | * {
border: thin black solid;
padding: 4px
} | 选择全部元素 |
| <元素类型> | 选取一个文档中该元素的全部实例 | a {
border: thin black solid;
padding: 4px
} | 选择a元素 |
| .<类名>（或 *.<类名>） | 指定全局属性class为指定类的元素 | .class2 {
border: thin black solid;
padding: 4px
} | 选中指定class2的全部类型的元素 |
| <元素类型>.<类名> | 指定全局属性class为指定类的特定元素 | span.class2 {
border: thin black solid;
padding: 4px
} | 选中指定class2的span元素 |
| <元素类型>.<类名1>.<类名2> | 指定全局属性class指定了多个类的元素，即同一时候指定类名1和类名2的元素 | span.class1.class2 {
border: thin black solid;
padding: 4px
} | 选中同一时候指定class1和class2的sapn元素 |
| #<id> | 依据全局属性id的值选择元素 | #w3canchor {
border: thin black solid;
padding: 4px
} | 选中id为w3canchor的元素 |
| <元素类型>.#<id> | 依据指定元素类型的id值选择元素 | span.#w3canchor {
border: thin black solid;
padding: 4px
} | 选中id为w3canchor的span元素 |
| [<条件>]或<元素类型>[<条件>] | 匹配具有指定条件的属性的元素 | [href] {
border: thin black solid;
padding: 4px
} | 匹配全部具有href属性的元素。见“元素属性选择器的条件” |
| 选择器 | 含义 | 演示样例 | 描写叙述 |
|---|---|---|---|
| <选择器1>,<选择器2>,<选择器3> | 选择器1、选择器2和选择器3匹配的全部元素的并集 | a,[lang|="en"] {
border: thin black solid;
padding: 4px
} | 选中a元素和具有属性lang，且属性值第一个为en的元素 |
| <选择器1> <选择器2> | 匹配选择器1的元素的后代元素中匹配选择器2的元素 | p span {
border: thin black solid;
padding: 4px
} | 匹配p元素的后代span元素 |
| <选择器1> > <选择器2> | 匹配选择器1的元素的直接后代元素（子元素）中匹配选择器2的元素 | body > * > span, tr > th {
border: thin black solid;
padding: 4px
} | 匹配body元素的随意子元素的span子元素，在匹配tr元素的th子元素 |
| <选择器1> + <选择器2> | 匹配选择器1的元素的兴许相邻的兄弟元素中匹配选择器2的元素 | p + a {
border: thin black solid;
padding: 4px
} | 匹配紧跟在p元素之后的a元素 |
| <选择器1> ~ <选择器2> | 匹配选择器1的元素的兴许兄弟元素中匹配选择器2的元素 | p ~ a {
border: thin black solid;
padding: 4px
} | 匹配p元素之后的a元素 |
| 选择器 | 含义 | 演示样例 | 说明 |
|---|---|---|---|
| ::first-line | 文本内容的首行 | ::first-line {
border: thin black solid;
padding: 4px
}
p::first-line {
border: thin black solid;
padding: 4px
} | 匹配p元素的文本的首行 |
| ::first-letter | 文本内容的首字母 | ::first-letter {
border: thin black solid;
padding: 4px
} | 匹配全部文本的首字母 |
| :before :after | 在选中元素的内容之前插入内容 在选中元素的内容之后插入内容 | a:before {
content: "Click here to "
}
a:after {
content: "!"
} | 分别在a元素的之前和之后插入内容 |
| 选择器 | 含义 | 演示样例 | 说明 |
|---|---|---|---|
| :root | 选择文档中的根元素。总是返回html | :root {
border: thin black solid;
padding: 4px
} | |
| :first-child | 父元素的第一个子元素 | p > span:first-child {
border: thin black solid;
padding: 4px
} | 匹配p元素的第一个span子元素 |
| :last-child | 父元素的最后一个子元素 | :last-child {
border: thin black solid;
padding: 4px
} | 匹配全部最后的子元素 |
| :only-child | 匹配父元素包括的唯一子元素 | :only-child {
border: thin black solid;
padding: 4px
} | 匹配仅有一个子元素的元素 |
| :only-of-type | 匹配父元素仅有一种类型子元素的全部子元素 | :only-of-type {
border: thin black solid;
padding: 4px
} |
| 选择器 | 含义 | 演示样例 | 说明 |
|---|---|---|---|
| :enabled和:disabled | 选择启用或禁用的元素，该选择器不会匹配没有禁用状态的元素 | :enabled {
border: thin black solid;
padding: 4px
} | 匹配启用的全部元素 |
| :checked | 选择由checked属性或用户勾选的单选button或者复选框 | :checked + span {
background-color: red;
color: white;
padding: 5px;
border: medium black solid;
} | 匹配勾选的元素后直接相邻的span元素 |
| :default | 选择一组相似元素中的默认元素。比如：提交button总是表单的默认button | :default {
outline: medium solid red;
} | |
| :value和:invalid | 分别匹配符合和不符合它们的输入验证要求的input元素 | :invalid {
outline: medium solid red;
}
:valid {
outline: medium solid green;
} | |
| :in-range :out-of-range | 匹配位于指定范围内的input元素 匹配位于指定范围之外的input元素 | :in-range {
outline: medium solid green;
}
:out-of-range {
outline: medium solid red;
} | 注意：仅部分浏览器支持 |
| :required :optional | 匹配具有required属性的input元素 匹配没有required属性的input元素 | :required {
outline: medium solid red;
}
:optional {
outline: medium solid green;
} |
| 选择器 | 含义 | 演示样例 | 说明 |
|---|---|---|---|
| :link :visited | 择链接元素 选择用户已訪问的链接元素 | :link {
border: thin black solid;
background-color: lightgrey;
padding: 4px;
color: red;
}
:visited {
background-color: grey;
color: white;
} | |
| :hover | 鼠标悬停在其上的元素 | button:hover {
border: thin black solid;
padding: 4px
} | 匹配鼠标悬停在其上的button元素 |
| :active | 当前被用户激活的元素，通常意味着用户即将点击该元素 | :active {
border: thin black solid;
padding: 4px
} | |
| :focus | 当前获得焦点的元素 | input:focus {
border: thin black solid;
padding: 4px
} | 选择获取焦点的input元素 |
| 选择器 | 含义 | 演示样例 | 说明 |
|---|---|---|---|
| :not(<选择器>) | 对括号内选择器的选择取反 | a:not([href*="apress"]) {
border: thin black solid;
padding: 4px
} | 匹配href属性没有包括字符串apress的a元素 |
| :empty | 没有子元素的元素 | ||
| :lang(<目标语言>) | 选择基于lang全局属性值的元素 | :lang(en) {
border: thin black solid;
padding: 4px
} | 匹配具有lang属性，且内容採用英文表达的元素 |
| :target | URL片段标识符指向的元素 | :target {
border: thin black solid;
padding: 4px;
color: red;
} |
原文：http://www.cnblogs.com/jhcelue/p/7246920.html