使用 CSS 选择器（二）
1、使用结构性伪类选择器
使用结构性伪类选择器能够根据元素在文档中的位置选择元素。这类选择器都有一个冒号字符前缀（:），例如 :empty。它们可以单独使用，也可以跟其他选择器组合使用，如 p:empty。
1.1、使用根元素选择器
:root 选择器匹配文档中的根元素。它可能是用得最少的一个伪类选择器，因为总是返回 html 元素。
| 选择器 | :root |
|---|---|
| 匹配 | 选择文档中的根元素，总是返回 html |
| 最低支持 CSS 版本 | 3 |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
:root {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
1.2、使用子元素选择器
使用子元素选择器匹配直接包含在其他元素中的单个元素。
| 选择器 | 说明 | CSS 版本 |
|---|---|---|
| :first-child | 选择元素的第一个子元素 | 2 |
| :last-child | 选择元素的最后一个子元素 | 3 |
| :only-child | 选择元素的唯一子元素 | 3 |
| :only-of-type | 选择元素指定类型的唯一子元素 | 3 |
1.2.1、使用 :first-child 选择器
:first-child 选择器匹配由包含它们的元素（即父元素）定义的第一个子元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
:first-child {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and <span>oranges</span>.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
只使用了 :first-child 选择器，这意味着它会匹配任意元素的第一个子元素。
将 :first-child 选择器用做修饰符，或者跟其他选择器组合使用可缩小选中元素的范围。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p > span:first-child {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and <span>oranges</span>.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
这个选择器会匹配作为 p 元素第一个子元素的任意 span 元素。
1.2.2、使用 :last-child 选择器
:last-child 选择器匹配由包含它们的元素定义的最后一个元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
:last-child {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and <span>oranges</span>.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
1.2.3、使用 :only-child 选择器
:only-child 选择器匹配父元素包含的唯一子元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
:only-child {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
只有一个子元素的元素就是 p 元素一个，它的唯一子元素是 span 元素。
1.2.4、使用 :only-of-type 选择器
:only-of-type 选择器匹配父元素定义类型的唯一子元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
:only-of-type {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
1.3、使用 :nth-child 选择器
使用这类选择器可以指定一个索引以匹配特定位置的元素。
| 选择器 | 说明 | CSS 版本 |
|---|---|---|
| :nth-child(n) | 选择父元素的第 n 个子元素 | 3 |
| :nth-last-child(n) | 选择父元素的倒数第 n 个子元素 | 3 |
| :nth-of-type(n) | 选择父元素定义类型的第 n 个子元素 | 3 |
| :nth-last-of-type(n) | 选择父元素定义类型的倒数第 n 个子元素 | 3 |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
body > :nth-child(2) {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
2、使用 UI 伪类选择器
使用 UI 选择器可以根据元素的状态匹配元素。
| 选择器 | 说明 | CSS 版本 |
|---|---|---|
| :enabled | 选择启用状态的元素 | 3 |
| :disabled | 选择禁用状态的元素 | 3 |
| :checked | 选择被选中的 input 元素（只用于单选按钮和复选框） | 3 |
| :default | 选择默认元素 | 3 |
| :valid :invalid | 根据输入验证选择有效或无效的 input 元素 | 3 |
| :in-range :out-of-range | 选择在指定范围之内或者之外受限的 input 元素 | 3 |
| :required :optional | 根据是否允许 :reuqired 属性选择 input 元素 | 3 |
2.1、选择启用或禁用元素
有些元素有启用或者禁用状态，这些元素一般是用来收集用户输入的。:enabled 和 :disabled 选择器不会匹配没有禁用状态的元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
:enabled {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<textarea> This is an enabled textarea</textarea>
<textarea disabled> This is a disabled textarea</textarea>
</body>
</html>
2.2、选择已勾选的元素
使用 :checked 选择器可以选中由 checked 属性或者用户勾选的单选按钮或者复选框。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
:checked + span {
background-color: red;
color: white;
padding: 5px;
border: medium solid black;
}
</style>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="apples">Do you like apples:</label>
<input type="checkbox" id="apples" name="apples"/>
<span>This will go red when checked</span>
</p>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
2.3、选择默认元素
:default 选择器从一组类似的元素中选择默认元素。例如，提交按钮总是表单的默认按钮。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
:default {
outline: medium solid red;
}
</style>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">Name: <input id="name" name="name"/></label>
</p>
<button type="submit">Submit Vote</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
这个选择器通常会跟 outline 属性一块使用。
2.4、选择有效或无效的 input 元素
:valid 和 :invalid 选择器分别匹配符合和不符合它们输入验证要求的 input 元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
:invalid {
outline: medium solid red;
}
:valid {
outline: medium solid green;
}
</style>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">Name: <input required id="name" name="name"/></label>
</p>
<p>
<label for="name">City: <input required id="city" name="city"/></label>
</p>
<button type="submit">Submit</button>
</form>
</body>
</html>
对有效元素应用了绿色轮廓，对无效元素应用了红色轮廓。文档中有两个 input 元素，它们都有 required 属性，这意味着只有输入值这两个元素才有效。
2.5、选择限定范围的 input 元素
关于输入验证的一种具体程度更高的变体是选择值限于指定范围的 input 元素。:in-range 选择器匹配位于指定范围内的 input 元素，:out-of-range 选择器匹配位于指定范围之外的 input 元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
:in-range {
outline: medium solid green;
}
:out-of-range: {
outline: medium solid red;
}
</style>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="price">
$ per unit in your area:
<input type="number" min="0" max="100"
value="1" id="price" name="price"/>
</label>
</p>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
2.6、选择必须和可选的 input 元素
:required 选择器匹配具有 required 属性的 input 元素，这能确保用户必需输入与 input 元素相关的值才能提交表单。:optional 选择器匹配没有 required 属性的 input 元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
:required {
outline: medium solid green;
}
:optional {
outline: medium solid red;
}
</style>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="price1">
$ per unit in your area:
<input type="number" min="0" max="100" required
value="1" id="price1" name="price1"/>
</label>
<label for="price2">
$ per unit in your area:
<input type="number" min="0" max="100"
value="1" id="price2" name="price2"/>
</label>
</p>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
3、使用动态伪类选择器
3.1、使用 :link 和 :visited 选择器
:link 选择器匹配超级链接，:visited 选择器匹配用户已访问过的超级链接。
对于用于访问过的链接，可在浏览器中设置保留已访问状态的时间。当用户清除浏览器历史记录，或者历史记录自然超时，链接会返回未访问状态。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
:link {
border: thin black solid;
background-color: lightgrey;
padding: 4px;
color:red;
}
:visited {
background-color: grey;
color:white;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
3.2、使用 :hover 选择器
:hover 选择器匹配用户鼠标悬停在其上的任意元素。鼠标在 HTML 页面内移动时，选中的元素样式会发生改变。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
:hover {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
3.3、使用 :active 选择器
:active 选择器匹配当前用户激活的元素。浏览器依然可以自行决定如何诠释激活，但多数浏览器会在鼠标点击的情况下使用这个选择器。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
:active {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<button>Hello</button>
</body>
</html>
3.4、使用 :foucs 选择器
最后一个动态伪类选择器是 :focus 选择器，它匹配当前获得焦点的元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
:focus{
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<form>
Name: <input type="text" name="name"/>
<p/>
City: <input type="text" name="city"/>
<p/>
<input type="submit"/>
</form>
</body>
</html>
挨个点击页面中的 input 元素，样式会应用到每个元素。
4、其他伪类选择器
4.1、使用否定选择器
否定选择器可以对任意选择取反。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a:not([href*="apress"]) {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
这个选择器匹配子元素没有包含 apress 字符串的 href 元素的所有元素。
4.2、使用 :empty 选择器
:empty 选择器匹配没有定义任何子元素的元素。
4.3、使用 :lang 选择器
:lang 选择器匹配基于 lang 全局属性值的元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
:lang(en) {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a lang="en-us" id="apressanchor" class="class1 class2" href="http://apress.com">
Visit the Apress website
</a>
<p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
<a lang="en" id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
4.4、使用 :target 选择器
可以为 URL 附加一个片段标识符，以便直接导航到基于 id 全局属性值的元素。例如，如果 HTML 文档 example.html 中包含一个 id 值为 myelement 的元素，那么你就可以直接通过请求 example.html#myelement 导航到该元素。:target 选择器匹配 URL 片段标识符指向的元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
:target {
border: thin black solid;
padding: 4px;
color:red;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p id="mytarget">I like <span>apples</span> and oranges.</p>
<a id="w3clink" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
