目录
一:使用结构性伪类选择器
(一):根元素选择器
使用:root选择器示例代码
<!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:使用: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>
运行效果
示例代码二:
<!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>
运行效果:
2:使用: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>
运行效果;
3:使用: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>
运行效果:
4:使用: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>
运行效果
5:使用:nth-child 选择器示例代码
<!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>
运行效果;
二:使用UI伪类选择器
(一):选择启用或禁用元素
示例代码:
<!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>
运行效果:
(二):选择已勾选的元素
示例代码:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Bruce"/>
<meta name="description" content="A simple example"/>
<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>
运行效果:
(三):选择默认元素
示例代码:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Bruce"/>
<meta name="description" content="A simple example"/>
<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>
运行效果:
(四):选择有效和无效的input元素
示例代码:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Bruce"/>
<meta name="description" content="A simple example"/>
<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元素
示例代码:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Bruce"/>
<meta name="description" content="A simple example"/>
<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>
运行效果:
(六):选择必需和可选的input元素
示例代码:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Bruce"/>
<meta name="description" content="A simple example"/>
<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>
运行效果:
三:使用动态伪类选择器
(一):使用: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>
(二):使用:hover选择器
示例代码:
<!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>
(三):使用: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>
(四):使用: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>
四:其他伪类选择器
(一):使用否定选择器
<!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>
运行效果:
(二):使用: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>
运行效果: