（1）CSS3 中提供的新选择器 —— 属性选择器：
- 属性选择器
属性选择器就是通过正则的方式去匹配指定属性的元素，为其设置样式。
在 CSS3 中新增了三种属性选择器，如下所示：
选择器 | 描述 |
E[attr^=“xx”] | 选择元素 E，其中 E 元素的 attr 属性是以 xx 开头的任何字符。 |
E[attr$=“xx”] | 选择元素 E，其中 E 元素的 attr 属性是以 xx 结尾的任何字符。 |
E[attr*=“xx”] | 选择元素 E，其中 E 元素的 attr 属性是包含 xx 的任何字符。 |
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
a[href^="#"] {
color: rgb(179, 255, 0);
}
a[href$="org"] {
color: rgb(195, 0, 255);
}
a[href*="le"] {
background-color: rgb(0, 255, 149);
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#">本地链接</a></li>
<li><a href="https://www.wangyelang.cn">王耶浪</a></li>
<li><a href="https://developer.mozilla.org">Web开发</a></li>
<li><a href="https://learningnotes.com">学习笔记</a></li>
</ul>
</body>
</html>显示为，
- 在上面代码中，我们使用 a[href^="#"] 去匹配 a 标签中 href 属性值以 # 开头的元素。
- 使用 a[href$="org"] 去匹配 a 标签中 href 属性值以 org 结尾的元素。
- 使用 a[href*="le"] 去匹配 a 标签中 href 属性值包含 un 的元素。
（2）子元素伪类选择器就是选择某元素的子元素的一种选择器。
在 CSS3 中，有以下几种子元素伪类选择器：
选择器 | 描述 |
E:first-child | 选择元素 E 的第一个子元素。 |
E:last-child | 选择元素 E 的最后一个子元素。 |
E:nth-child(n) | 选择元素 E 的第 n 个子元素，n 有三种取值，数字、odd 和 even。注意第一个子元素的下标是 1。 |
E:only-child | 选择元素 E 下唯一的子元素。 |
E:first-of-type | 选择父元素下第一个 E 类型的子元素。 |
E:last-of-type | 选择父元素下最后一个 E 类型的子元素。 |
E:nth-of-type(n) | 选择父元素下第 n 个 E 类型的子元素，n 有三种取值，数字、odd 和 even。 |
E:only-of-type | 选择父元素唯一的 E 类型的子元素。 |
E:nth-last-child(n) | 选择所有 E 元素倒数的第 n 个子元素。 |
E:nth-last-of-type(n) | 选择所有 E 元素倒数的第 n 个为 E 的子元素。 |
例子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
margin-top: 10px;
background-color: rgb(0, 255, 242);
}
div:nth-child(2) {
background-color: rgb(0, 255, 128);
}
div:nth-of-type(4) {
background-color: rgb(111, 0, 255);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
显示效果，
- div:nth-child(2) 给 div 的第 2 个子元素添加绿色背景颜色。
- div:nth-of-type(4) 给父元素下第 4 个 div 子元素添加紫色背景颜色。
（3）UI 伪类选择器是通过元素的状态来选择的一种选择器。
在 CSS3 中有以下几种 UI 伪类选择器。
选择器 | 描述 |
:focus | 给获取焦点的元素设置样式。 |
::selection | 给页面中被选中的文本内容设置样式。 |
:checked | 给被选中的单选框或者复选框设置样式。 |
:enabled | 给可用的表单设置样式。 |
:disabled | 给不可用的表单设置样式。 |
:read-only | 给只读表单设置样式。 |
:read-write | 给可读写的表单元素设置样式。 |
:valid | 验证有效。 |
:invalid | 验证无效。 |
练习一：属性有效性验证
页面上有一个邮箱输入框，当你的输入满足邮箱格式时，输入框的背景颜色为绿色；当你的输入不满足要求，背景颜色为红色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*格式错误*/
input:invalid {
background-color: red;
}
/*格式正确*/
input:valid {
background-color: green;
}
</style>
</head>
<body>
电子邮箱：<input type="email" />
</body>
</html>练习二：获得焦点验证
页面上有一个姓名输入框和一个密码输入框，当聚焦输入框时，输入框的背景颜色会发生改变，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
input:focus {
background-color: rgb(255, 153, 0);
}
</style>
</head>
<body>
姓名：<input type="text" /><br />
密码：<input type="password" />
</body>
</html>练习：
实现一个五彩导航
在前面的内容中，我们已经学习了 CSS3 的选择器应用。我们在之前的章节中也做过横向导航，这里我们结合所学的 CSS3 选择器来实现一个升级版的导航。
知识点
- hover 伪类选择器
要求
- 新建一个 html 文件。
- 将 <a> 标签转换成行内块，宽 120px 高 58px、设置背景颜色 #FFFAE8；
- 当鼠标移动到链接上时达到以下要求：
- 背景颜色分别变为 #E1D15E、#F9D6D1、#5BDE66、#EBAA8D、#BED780；
- 设置圆角效果（border-radius）；
- 字体：颜色为 #fff，去掉链接下划线。
验证测试
按以上要求用 HTML 完成以下效果：
解题：
<!DOCTYPE html>
<html>
<head>
<style>
a {
display: inline-block;
width: 120px;
height: 58px;
background-color: #FFFAE8;
text-align: center;
line-height: 58px;
text-decoration: none;
color: #fff;
border-radius: 10px;
}
a:hover:nth-of-type(1) {
background-color: #E1D15E;
}
a:hover:nth-of-type(2) {
background-color: #F9D6D1;
}
a:hover:nth-of-type(3) {
background-color: #5BDE66;
}
a:hover:nth-of-type(4) {
background-color: #EBAA8D;
}
a:hover:nth-of-type(5) {
background-color: #BED780;
}
</style>
</head>
<body>
<a href="#">导航一</a>
<a href="#">导航二</a>
<a href="#">导航三</a>
<a href="#">导航四</a>
</body>
</html>