24、web前端开发之CSS3（一）-EW帮帮网

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）：为元素添加阴影效果，增强视觉层次感。
背景与边框（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。
变换（Transforms）
- 2D变换：包括平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等操作，改变元素在二维空间中的显示。
- 3D变换：支持三维变换，如transform-style: preserve-3d，用于创建立体的视觉效果。
弹性盒布局（Flexbox）
- Flex容器：通过display: flex定义弹性容器，子元素（Flex项目）在其中可以灵活排列，适应不同的屏幕尺寸和空间。
- 轴对齐：支持主轴（justify-content）和交叉轴（align-items）对齐方式，灵活控制子元素的布局。
- Flex项目的属性：如flex-grow, flex-shrink, flex-basis等，用于控制子元素的拉伸、收缩和初始尺寸。
网格布局（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 1</div>  
        <div>Inner div 2</div>  
        <p>段落1</p>  
        <p>段落2</p>  
    </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>项目1</li>  
    <li>项目2</li>  
    <li>项目3</li>  
    <li>项目4</li>  
</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>项目1</li>  
    <li>项目2</li>  
    <li>项目3</li>  
</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>项目1</li>  
        <li>项目2</li>  
        <li>项目3</li>  
        <li>项目4</li>  
    </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选择器的使用，提升自己的前端开发技能。

24、web前端开发之CSS3（一）

CSS3详细讲义

目录

一、CSS3简介

二、CSS3的核心特性

三、CSS3详细讲解

1、选择器

1.1. 类型选择器

1.2. 类选择器

1.3. ID选择器

1.4. 属性选择器

1.5. 伪类选择器

1.6. 伪元素选择器

1.7. 组合选择器

1.8. 否定选择器

1.9. 空选择器

1.10. 逻辑组合选择器

1.11. 高级伪类选择器

1.12. 表单相关伪类

1.13. 特殊形式的选择器

1.14. 效率和性能考虑

1.15. 浏览器兼容性

1.16. 最佳实践

1.17. 实践示例

1.18. 总结

网站公告

今日签到

热门文章

最新发布