24、web前端开发之CSS3（一）
CSS3详细讲义
目录
- CSS3简介
- CSS3核心特性
- 选择器
- 盒模型
- 背景与边框
- 文本样式
- 颜色与透明度
- 过渡与动画
- 变换
- 弹性盒布局
- 网格布局
- 媒体查询
- 多列布局
- 字体与排版
- 装饰与效果
- 性能优化
- 新特性与兼容性
- CSS3实践示例
- 总结
一、CSS3简介
CSS3（Cascading Style Sheets, Level 3）是CSS技术的最新版本，旨在通过引入新的功能和改进，提升Web开发的效率和网页的视觉效果。CSS3是模块化的，每个模块独立开发和发布，涵盖了选择器、盒模型、背景、边框、文本、变换、过渡、动画、多列布局、网格布局等多个方面。通过使用CSS3，开发者可以创建更加丰富、灵活和交互式的Web应用。
二、CSS3的核心特性
CSS3（Cascading Style Sheets, Level 3）是CSS技术的最新版本，相较于前一版本CSS2，CSS3引入了许多新特性和改进，使得Web设计更加灵活、强大。以下是CSS3的一些核心特性：
- 选择器（Selectors）
- 类型选择器：根据元素类型（如
div,p）选择元素。 - 类选择器：根据元素的
class属性选择元素，常用于样式重用。 - ID选择器：根据元素的唯一
id属性选择元素。 - 属性选择器：根据元素的属性及其值选择元素，支持子字符串匹配、包含值等高级匹配方式。
- 伪类选择器：用于选择元素的特定状态（如
:hover,:active，以及结构伪类如:nth-child）。 - 伪元素选择器：用于选择元素的一部分（如
:first-letter,::after）。 - 组合选择器：允许多个选择器结合，精确选择目标元素。
- 类型选择器：根据元素类型（如
- 盒模型（Box Model）
- 边框（Borders）：增强了边框的控制，例如圆角边框（
border-radius）、边框图片（border-image）等。 - 内边距与外边距：更灵活地控制元素的空白区域。
- 盒子阴影（Box-shadow）：为元素添加阴影效果，增强视觉层次感。
- 边框（Borders）：增强了边框的控制，例如圆角边框（
- 背景与边框（Backgrounds and Borders）
- 多背景（Multiple Backgrounds）：允许在一个元素上设置多个背景图像，通过位置和重复属性控制其显示。
- 边框图片（Border Images）：使用图片作为边框，提供更加丰富的视觉效果。
- 圆角边框（Rounded Corners）：通过
border-radius属性轻松实现圆角效果。
- 文本样式（Text Styling）
- 字体阴影（Text Shadow）：为文本添加阴影，提升文字的可读性和美观度。
- 文本对齐（Text Alignment）：提供更多的对齐方式，如
text-align-last控制末行文本的对齐。 - 字符间距（Letter Spacing）：调整字母之间的间距，优化文本排版。
- 文字溢出（Text Overflow）：控制溢出文本的显示方式，例如
text-overflow: ellipsis将溢出部分替换为省略号。
- 颜色与透明度（Colors and Transparency）
- 新颜色模式：支持HSL（Hue, Saturation, Lightness）和HSLA（包含透明度的HSL）以及RGBA（包含透明度的RGB）颜色模式，使得颜色的定义更加直观和灵活。
- 透明度控制：通过Alpha通道（
opacity，color: rgba(r, g, b, a)）实现元素的透明和半透明效果。
- 过渡与动画（Transitions and Animations）
- 过渡（Transitions）：允许在元素的状态变化（如
:hover）时，平滑地过渡到新的样式，提升用户体验。 - 关键帧动画（Keyframes Animations）：通过定义关键帧，创建复杂的动画效果，无需依赖JavaScript。
- 过渡（Transitions）：允许在元素的状态变化（如
- 变换（Transforms）
- 2D变换：包括平移（
translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等操作，改变元素在二维空间中的显示。 - 3D变换：支持三维变换，如
transform-style: preserve-3d，用于创建立体的视觉效果。
- 2D变换：包括平移（
- 弹性盒布局（Flexbox）
- Flex容器：通过
display: flex定义弹性容器，子元素（Flex项目）在其中可以灵活排列，适应不同的屏幕尺寸和空间。 - 轴对齐：支持主轴（
justify-content）和交叉轴（align-items）对齐方式，灵活控制子元素的布局。 - Flex项目的属性：如
flex-grow,flex-shrink,flex-basis等，用于控制子元素的拉伸、收缩和初始尺寸。
- Flex容器：通过
- 网格布局（Grid）
- 定义网格：通过
display: grid创建网格容器，使用grid-template-columns和grid-template-rows定义列和行。 - 网格单位：引入了
fr单位（fractional unit），表示网格轨道的比例关系。 - 子元素的定位：使用
grid-column和grid-row属性，将子元素放置在网格的特定位置。 - 自动布局：支持
auto-fill和auto-fit属性，根据容器尺寸自动调整网格轨道的数量和大小。
- 定义网格：通过
- 媒体查询（Media Queries）
- 响应式设计：通过媒体查询，可以针对不同设备特性（如屏幕尺寸、设备类型、方向等）应用不同的样式，实现真正的响应式设计。
- 条件应用样式：使用
@media规则，根据满足特定条件时应用相应的CSS样式，从而优化在不同设备上的显示效果。
- 多列布局（Multi-column Layout）
- 多列内容：通过
column-count属性，将内容自动分成多列，类似报纸或杂志的布局。 - 列的宽度和间隔：使用
column-width和column-gap控制列的宽度和列与列之间的间隔。 - 列规则：
column-rule属性用于设置列之间的分隔线，提升内容的可读性。
- 多列内容：通过
- 字体与排版（Typography）
- 自定义字体：通过
@font-face规则，允许使用非标准字体，增强视觉效果。 - 字体属性：
font-feature-settings属性可以访问字体的高级功能，如连字和配字。 - 垂直文本：
writing-mode属性支持垂直方向的文本排版，适应不同语言的书写习惯。
- 自定义字体：通过
- 装饰与效果（Decorations and Effects）
- 盒子阴影（Box-shadow）：为元素添加阴影，提升层次感。
- 浮影（Text-shadow）：为文本添加阴影，增强文字的可读性。
- 模糊效果（Filter）：通过
filter属性实现模糊、灰度、反色等效果。 - 剪裁（Clip-path）：定义元素的显示区域，支持复杂的剪裁路径，实现创意设计。
- 性能优化（Performance Optimization）
- 优化动画和过渡：合理使用CSS动画和过渡，避免不必要的性能消耗。
- 减少重绘和回流：通过优化选择器和布局，减少浏览器的重绘和回流次数，提升渲染速度。
- 硬件加速：利用CSS3的3D变换和动画，触发硬件加速，提升动画的流畅度。
- 新特性与兼容性（New Features and Compatibility）
- 浏览器支持：不同浏览器对CSS3特性的支持情况不一，需了解各特性的兼容性。
- 厂商前缀（Vendor Prefixes）：在某些特性尚未标准化时，通过添加厂商前缀（如
-webkit-,-moz-）确保在不同浏览器中的兼容性。 - Polyfills：使用JavaScript或CSS库，弥补旧浏览器对新特性的支持不足，确保功能的一致性。
- 实践应用（Practice Applications）
- 响应式网页设计：利用媒体查询和灵活的布局，创建适应不同设备的网页。
- 交互设计：通过CSS3的过渡和动画，提升用户界面的交互体验。
- 视觉设计：利用CSS3的装饰效果和变换，创建更加丰富和吸引人的视觉效果。
- 高效开发：通过预处理器（如Sass, LESS）和构建工具，提升开发效率和代码质量。
三、CSS3详细讲解
CSS3选择器是Cascading Style Sheets（CSS）中用于选择和应用样式到HTML文档中特定元素的工具。它们通过各种方式描述和匹配文档中的元素，以便为目标元素应用所需的样式。选择器可以是简单的类型选择器，也可以是复杂的组合选择器，具体取决于我们需要控制的精度和复杂度。
1、选择器
1.1. 类型选择器
类型选择器是基于HTML标签名的选择器。它们会选择文档中所有匹配该标签名的元素。
示例：
p {
margin: 10px 0;
}
这个选择器会将所有段落（
）元素的上下外边距设置为10px。
1.2. 类选择器
类选择器允许我们根据元素的class属性来选择特定元素。它们以点号开头。
示例：
<p class="important">这段文字很重要。p>
.important {
color: red;
font-weight: bold;
}
在这个示例中，所有具有class属性为"important"的元素会被设置为红色且加粗。
1.3. ID选择器
ID选择器根据元素的id属性来选择特定元素。每个id在一个HTML文档中应是唯一的。ID选择器以哈希号开头。
示例：
<p id="welcome">欢迎来到我的网页。p>
#welcome {
color: blue;
font-size: 1.5em;
}
这个选择器会将id为"welcome"的段落元素的文本颜色设置为蓝色，字体大小为1.5em。
1.4. 属性选择器
属性选择器可以选择具有特定属性的元素，或者具有特定属性值的元素。它们在CSS2中已存在，但在CSS3中得到了增强。
示例：
<input type="text" name="username" required>
input[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}
这会将所有type属性为"text"的元素的边框设置为1px的灰色实线，并添加5px的内边距。
高级属性选择器：
CSS3还引入了更复杂的属性选择器，可以进行子字符串匹配和区分大小写的选择。
[attribute^="value"]：选择属性值以"value"开头的元素。[attribute$="value"]：选择属性值以"value"结尾的元素。[attribute*="value"]：选择属性值包含"value"的元素。[attribute~="value"]：选择属性值包含以空格分隔的"value"的元素。[attribute|="value"]：选择属性值为"value"或以"value-"为后缀的元素。[attribute="value" i]：以不区分大小写的方式匹配属性值。
示例：
a[hreflang|="zh"] {
color: red;
}
这会选择所有hreflang属性值为“zh”或以“zh”为后缀的链接元素，并将其颜色设置为红色。
1.5. 伪类选择器
伪类选择器用于选择处于特定状态或位置的元素。它们可以模拟实时的状态变化，或是选择特定位置的元素。
常见的基本伪类：
:link：选择未被访问过的链接。:visited：选择已被访问过的链接。:hover：选择被鼠标悬停的元素。:active：选择被激活的元素（如被点击的链接）。:focus：选择获得焦点的元素。
示例：
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: #999;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: green;
}
这个示例展示了链接在不同状态下的不同样式。
CSS3新增的伪类：
:root：选择文档的根元素。:nth-child(n)：选择父元素的第n个子元素。:nth-of-type(n)：选择父元素的第n个某种类型的子元素。:last-child：选择父元素的最后一个子元素。:only-child：选择父元素的唯一一个子元素。:checked：选择被选中的表单元素（如单选按钮、复选框等）。:disabled：选择禁用的表单元素。:enabled：选择可用的表单元素。:required：选择必填的表单元素。:valid：选择合法的表单元素。:invalid：选择不合法的表单元素。:in-range：选择值在特定范围内的表单元素。:out-of-range：选择值不在特定范围内的表单元素。:read-only：选择只读的表单元素。:read-write：选择可读写的表单元素。:placeholder-shown：选择显示占位符的表单元素。:autofill：选择自动填充的表单元素。:optional：选择可选的表单元素。:target：选择当前目标元素（用于页面片段识别）。
示例：
<input type="text" required>
:required {
border: 1px solid #ff0000;
}
这会将所有必填的文本输入框设置为红色边框。
1.6. 伪元素选择器
伪元素选择器用于选择元素的一部分内容，或在元素中插入额外的内容。
常见的基本伪元素：
::first-letter：选择块级元素的第一个字母。::first-line：选择块级元素的第一行文本。::before和::after：在元素内容的开始或结束处插入内容。
示例：
<p class="title">这是一个示例段落。p>
.title::first-letter {
font-size: 2em;
font-weight: bold;
color: red;
}
这会将段落的第一个字母设置为2em大小，红色且加粗。
在伪元素中使用content属性插入内容：
p::before {
content: "开始:";
color: #666;
padding-right: 10px;
}
这会在每个段落元素的最前面添加“开始：”这几个字，并设置其颜色为灰色，右侧添加10px的内边距。
1.7. 组合选择器
组合选择器允许同时应用多个选择器条件，以更精确地选择目标元素。
基本组合方式：
- 后代选择器：使用空格隔开的选择器，选择所有子代元素。
- 子代选择器：使用
>符号，选择直接子代元素。 - 同胞选择器：
- 相邻兄弟选择器：使用
+符号，选择紧接在某个元素之后的元素。 - 通用兄弟选择器：使用
~符号，选择所有位于同一父元素下的元素。
- 相邻兄弟选择器：使用
- 多项选择器：使用逗号
，分隔多个选择器，选择多个不同的元素。 - 属性和类组合：可以将属性选择器与类选择器或其他选择器结合使用。
示例：
DOCTYPE html>
<html>
<head>
<style>
/* 后代选择器 */
.outer div {
padding: 10px;
border: 1px solid #ccc;
}
/* 子代选择器 */
.outer > p {
margin: 5px 0;
}
/* 相邻兄弟选择器 */
h2 + p {
color: red;
font-weight: bold;
}
/* 通用兄弟选择器 */
h2 ~ p {
line-height: 1.8;
}
/* 多项选择器 */
h1, h2, h3 {
color: #333;
}
/* 属性和类组合 */
input[type="text"].username {
width: 200px;
padding: 8px;
}
style>
head>
<body>
<div class="outer">
<div>Inner div 1div>
<div>Inner div 2div>
<p>段落1p>
<p>段落2p>
div>
<h2>标题h2>
<p>第一段内容。p>
<p>第二段内容。p>
<h1>主标题h1>
<h2>副标题h2>
<h3>子标题h3>
<input type="text" class="username" placeholder="请输入用户名">
body>
html>
在这个示例中，展示了各种组合选择器的应用。例如，后代选择器.outer div选择外层div中的所有div元素，并为其添加内边距和边框；相邻兄弟选择器h2 + p选择紧接在h2元素之后的p元素，并将其颜色设置为红色且加粗；多项选择器h1, h2, h3将所有标题元素的颜色统一为灰色。
1.8. 否定选择器
:not()选择器用于排除不符合条件的元素。
示例：
<p class="special">这是一个特殊的段落。p>
<p>这是一个普通的段落。p>
p:not(.special) {
color: #666;
}
这会将所有不具有class="special"的段落元素的颜色设置为灰色。
1.9. 空选择器
:empty选择器用于选择没有子元素的元素。
示例：
<div class="container">div>
.container:empty {
display: none;
}
这会隐藏所有没有子元素的具有class="container"的div元素。
1.10. 逻辑组合选择器
CSS3引入了逻辑组合选择器，允许我们通过逻辑操作组合多个选择器条件。
主要的逻辑组合选择器包括：
:is()：匹配任何给定的选择器列表。:where()：类似于is()，但权重更低。:has()：匹配包含特定子元素的元素。
示例：
<div class="media">
<img src="image.jpg" alt="示例图像">
<p>这是一段描述。p>
div>
:has(img) {
background-color: #f0f0f0;
padding: 20px;
}
这会将所有包含元素的元素设置为浅灰色背景，并添加20px的内边距。
1.11. 高级伪类选择器
1. nth-child(n) 和 nth-of-type(n)
:nth-child(n)：选择父元素的第n个子元素，n可以是数字、奇数（odd）、偶数（even）。:nth-of-type(n)：选择父元素的第n个某类型的子元素。
示例：
<ul>
<li>项目1li>
<li>项目2li>
<li>项目3li>
<li>项目4li>
ul>
li:nth-child(2) {
background-color: #f0f0f0;
}
li:nth-of-type(3) {
font-weight: bold;
}
这会将列表中的第二个项目设置为浅灰色背景，并将第三个项目设置为加粗。
2. first-child 和 last-child
:first-child：选择父元素的第一个子元素。:last-child：选择父元素的最后一个子元素。
示例：
<ul>
<li>项目1li>
<li>项目2li>
<li>项目3li>
ul>
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
这会将第一个项目设置为红色，最后一个项目设置为蓝色。
3. only-child
选择父元素的唯一一个子元素。
示例：
<div class="single">
<p>唯一的段落。p>
div>
.single:only-child {
font-size: 1.5em;
color: green;
}
这会将唯一的段落元素字体大小设置为1.5em，颜色为绿色。
4. checked
选择被选中的表单元素（如单选按钮、复选框等）。
示例：
<input type="checkbox" id="agree">
<label for="agree">我同意条款。label>
input:checked + label {
color: red;
font-weight: bold;
}
这会在复选框被选中时，将其对应的标签颜色设置为红色且加粗。
1.12. 表单相关伪类
CSS3引入了一系列表单相关的伪类选择器，用于增强表单元素的样式控制。
主要伪类包括：
:enabled：选择可用的表单元素。:disabled：选择禁用的表单元素。:required：选择必填的表单元素。:optional：选择可选的表单元素。:valid：选择合法的表单元素。:invalid：选择不合法的表单元素。:in-range：选择值在特定范围内的表单元素。:out-of-range：选择值不在特定范围内的表单元素。:read-only：选择只读的表单元素。:read-write：选择可读写的表单元素。:placeholder-shown：选择显示占位符的表单元素。:autofill：选择自动填充的表单元素。
示例：
<form>
<input type="text" required placeholder="请输入用户名">
<input type="email" required placeholder="请输入邮箱">
<button type="submit">提交button>
form>
:required {
border: 1px solid #ff0000;
}
:invalid {
border: 1px solid #ff0000;
background-color: #ffe6e6;
}
input:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 5px rgba(76,175,80,0.3);
}
在这个示例中，所有必填的表单输入框会在输入无效时显示红色边框，并在获得焦点时显示绿色边框和轻微的盒影。
1.13. 特殊形式的选择器
1. 目标选择器 (:target)
:target伪类选择器用于选择到达通过片段标识符（即URL中的#部分）表示的目标元素。这种选择器在单页面应用（SPA）中非常有用，可以通过改变URL的片段标识符来显示不同的内容。
示例：
DOCTYPE html>
<html>
<head>
<style>
:target {
border: 2px solid #4CAF50;
padding: 20px;
}
section {
margin: 20px;
padding: 10px;
}
style>
head>
<body>
<a href="#home">首页a> |
<a href="#about">关于a> |
<a href="#contact">联系a>
<section id="home">
<h2>首页h2>
<p>欢迎来到首页。p>
section>
<section id="about">
<h2>关于h2>
<p>这是关于页面的内容。p>
section>
<section id="contact">
<h2>联系h2>
<p>这是联系页面的内容。p>
section>
body>
html>
在这个示例中，当用户点击导航链接时，目标section会被:target选择器选中，并添加绿色边框和内边距，突出显示当前查看的内容。
2. 自动填充选择器 (:autofill)
:autofill伪类选择器用于选择自动填充的表单元素。现代浏览器在用户选择自动填充选项时会触发该伪类。
示例：
<input type="text" id="username" autocomplete="on">
input:autofill {
background-color: yellow;
}
这会在浏览器自动填充输入框时，将其背景颜色设置为黄色。
3. 只读和读写选择器
:read-only：选择只读的表单元素。:read-write：选择可读写的表单元素。
示例：
<input type="text" value="只读" readonly>
<input type="text" value="可读写">
:read-only {
background-color: #f0f0f0;
}
:read-write {
background-color: #ffffff;
}
这会将只读输入框的背景颜色设置为浅灰色，而可读写的输入框保持白色背景。
1.14. 效率和性能考虑
在使用高级选择器时，需要考虑其对性能的影响。复杂的选择器可能会降低浏览器的渲染速度，尤其是在处理大型或复杂的文档时。因此，合理选择选择器，避免使用过于复杂的组合选择器，可以提高页面的性能。
优化技巧：
- 避免过于复杂的选择器：尽量简化选择器，减少浏览器解析的工作量。
- 使用高效的选择器：选择器的效率从高到低通常为：ID > 类 > 标签名 > 属性选择器 > 伪类选择器 > 组合选择器。
- 减少深层次的后代选择器：过多的嵌套选择器会增加计算复杂度。
- 利用CSS预处理器：使用Sass或LESS等预处理器，可以通过 mixin和变量提高代码的可维护性，同时减少冗长的选择器。
1.15. 浏览器兼容性
CSS3的新特性在不同浏览器中的支持情况可能不一致，尤其是在旧版本的浏览器中。因此，了解不同选择器的浏览器兼容性非常重要。在实际项目中，为了确保广泛的兼容性，可以采用以下策略：
- 使用Polyfills：通过引入Polyfills库，为旧浏览器提供对新特性的支持。
- 添加厂商前缀：在必要时为部分属性添加厂商前缀（如
-webkit-,-moz-,-ms-,-o-），以确保新特性在各大浏览器中的正常显示。 - 渐进增强：首先为所有浏览器提供基本的功能和样式，然后逐步添加高级的样式和交互，确保在旧浏览器中依然保持可用性。
示例：
.border-radius {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
在这个示例中，添加了各大厂商的前缀，确保圆角边框在不同浏览器中的兼容性。
1.16. 最佳实践
在实际项目中，合理地使用选择器可以提高代码的可维护性和效率。以下是一些最佳实践：
- 明确选择器的范围：通过合理的类名和结构，确保选择器只影响目标元素，避免样式污染。
- 避免过度使用ID选择器：ID选择器的权重高于类选择器，可能会导致样式冲突，影响维护性。
- 使用语义化的类名：类名应具有描述性，反映元素的内容或功能，而不是样式信息。
- 利用继承性：CSS的继承特性可以简化代码，减少重复的样式定义。
- 分组声明：将适用于多个选择器的样式分组，减少代码重复。
- 利用预处理器的优势：使用Sass或LESS的嵌套规则，可以更清晰地组织选择器，提高代码的可读性。
1.17. 实践示例
通过以下几个示例，可以更好地理解和掌握CSS3选择器的用法。
示例1：基本选择器的使用
DOCTYPE html>
<html>
<head>
<style>
/* 类型选择器 */
p {
margin: 10px 0;
}
/* 类选择器 */
.highlight {
color: red;
font-weight: bold;
}
/* ID选择器 */
#summary {
background-color: #f0f0f0;
padding: 10px;
}
/* 属性选择器 */
a[hreflang="zh"] {
color: blue;
}
/* 伪类选择器 */
a:hover {
text-decoration: none;
}
/* 伪元素选择器 */
p::first-letter {
font-size: 2em;
}
style>
head>
<body>
<p class="highlight">这是一个突出的段落。p>
<p id="summary">这是一个摘要段落。p>
<a href="https://www.example.com" hreflang="zh">中文链接a>
body>
html>
示例2：组合选择器
DOCTYPE html>
<html>
<head>
<style>
/* 后代选择器 */
.outer p {
color: #666;
}
/* 子代选择器 */
.outer > h2 {
font-size: 1.5em;
}
/* 相邻兄弟选择器 */
h3 + p {
font-weight: bold;
}
/* 通用兄弟选择器 */
h2 ~ p {
line-height: 1.8;
}
/* 多项选择器 */
h1, h2, h3 {
color: #333;
}
/* 属性和类组合 */
input[type="text"].username {
width: 200px;
padding: 8px;
}
style>
head>
<body>
<div class="outer">
<h2>子标题h2>
<p>子标题下的段落。p>
div>
<h3>另一个标题h3>
<p>紧接在h3后的段落。p>
<input type="text" class="username" placeholder="请输入用户名">
body>
html>
示例3：高级伪类
DOCTYPE html>
<html>
<head>
<style>
/* :nth-child(n) */
li:nth-child(2) {
background-color: #f0f0f0;
}
/* :first-child 和 :last-child */
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
/* :not() */
p:not(.special) {
color: #666;
}
/* :has() */
div:has(img) {
border: 1px solid #ccc;
padding: 10px;
}
/* 表单相关伪类 */
:required {
border: 1px solid red;
}
input:focus {
outline: none;
border-color: green;
box-shadow: 0 0 5px rgba(0, 128, 0, 0.3);
}
style>
head>
<body>
<ul>
<li>项目1li>
<li>项目2li>
<li>项目3li>
<li>项目4li>
ul>
<p class="special">特殊段落p>
<p>普通段落p>
<div>
<img src="image.jpg" alt="示例图片">
<p>包含图片的div元素。p>
div>
<form>
<input type="text" required placeholder="用户名">
<input type="email" required placeholder="邮箱">
form>
body>
html>
通过这些示例，可以更好地理解和掌握CSS3选择器的各种特性及其在实际中的应用。
1.18. 总结
CSS3选择器为Web开发者提供了更加强大和灵活的工具，能够更精确地控制和美化Web页面的外观。从基本的类型选择器到复杂的组合选择器，再到高级的伪类和伪元素选择器，选择器的种类和功能极大丰富了CSS的表现力。合理地使用这些选择器，不仅可以提升开发效率，还能提高代码的可维护性和可读性。然而，选择器的复杂程度和浏览器兼容性问题也是需要关注的地方。通过实践和不断的学习，可以更好地掌握CSS3选择器的使用，提升自己的前端开发技能。