CSS3选择器详解二

伪类(基于某些共同特征选择元素提供方便)

选择器

1 :root根选择器

<style type="text/css">
:root {
border: thin black solid;
padding: 4px;
}
</style>

2 :first-child :last-child :only-child :only-of-type

案例1：
<style type="text/css">
:first-child {
border: thin black solid;
padding: 4px;
}
</style>
案例2：
<style type="text/css">
p > span:first-child {
border: thin black solid;
padding: 4px;
}
</style>
案例3：
<style type="text/css">
:last-child {
border: thin black solid;
padding: 4px;
}
</style>
案例4：
<style type="text/css">
:only-child {
border: thin black solid;
padding: 4px;
}
</style>
案例5：
<style type="text/css">
:only-of-type {
border: thin black solid;
padding: 4px;
}
</style>

3 :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) n从1开始

<style type="text/css">
body > :nth-child(2) {
border: thin solid black;
padding: 4px;
}
</style>

4 UI伪类选择器

:enabled

:disabled

:checked

:default

:valid(valid input)

:invalid(invalid input)

:in-range

:out-of-range

:required(匹配有required input)

:optional(匹配有optional input)

案例1：
<style type="text/css">
:enabled {
border: thin black solid;
padding: 4px;
}
</style>
案例2：
<style type="text/css">
:checked + span {
background-color: red;
color: white;
padding: 4px;
border: medium black solid;
}
</style>
案例3：
<style type="text/css">
:default {
outline: medium solid black;
}
</style>
案例4：
<style type="text/css">
input:invalid {
outline: medium solid red;
}
input:valid {
outline: medium solid green;
}
</style>
案例5：
<style type="text/css">
#name:invalid {
outline: medium solid red;
}
#name:valid {
outline: medium solid green;
}
</style>
案例6：
<style type="text/css">
:in-range {
outline: medium solid green;
}
:out-of-range {
outline: medium solid red;
}
</style>
案例7：
<style type="text/css">
:required {
outline: medium solid red;
}
:optional {
outline: medium solid green;
}
</style>

5 动态伪类选择器

:link

:visited

:hover

:active

:focus

案例1：

<style type="text/css">
a:link {
border: thin black solid;
background-color: lightgrey;
color: red;
}
a:visited {
background-color: yellow;
color: white;
}
a:hover {
background-color: aqua;
color: red;
}
a:active {
background-color: blue;
color: red;
}
:focus {
border: medium solid red;
padding: 4px;
}
</style>

6 其他伪类选择器

否定选择器:(:not(<selector>))
<style type="text/css">
a:not([href*="baidu"]) {
border: medium solid black;
padding: 4px;
}
</style>
:empty选择器
:lang(en)

<style type="text/css">
:lang(en) {
border: thin black solid;
padding: 4px;
}
</style>

:target(可以为URL添加一个片段标识符),通过url#id访问显示
<style type="text/css">
:target {
border: solid red medium;
padding: 4px;
}
</style>