【网页前端】CSS进阶之复合选择器

简介: 【网页前端】CSS进阶之复合选择器

1.概述

复合选择器:多个基本选择器的组合使用形式。

作用:更准确、更高效地选择目标元素(标签)。

常用的复合选择器:包含选择器、子对象选择器、并集选择器、伪类选择器

2.包含选择器

1.1 概述及格式

包含选择器又名后代选择器。

指标签和标签之间有 包含 关系(父子、爷孙都是包含),例如: <html> 标签包含了 <body> 标签。

我们可以对基本选择器进行组合,表现出包含关系,从而更加针对性地把样式作用于某些标签上。

格式:

选择器 1 选择器 2 …..{

/*css 样式代码*/

}

意思为:搜索选择器 1 下的所有的 选择器 2

1.2 案例代码

准备代码:仅要求 div 下所有的 font 标签变为红色,其他颜色黑色

<div> 
    <span>
        <font>变为红色字体 111</font> 
    </span> 
    <font>变为红色字体 222</font> 
    黑色字体 111 
</div> 
<font>黑色字体 222</font>

示例:

image.png

 效果:

image.png

3.子对象选择器

1.2 概述及格式

标签和标签之间有父子关系,例如:<body>标签的父标签为<html>标签。

我们可以对基本选择器进行组合,表现出父子关系

格式:

选择器 1>选择器 2 …..{

/*css 样式代码*/

}

意思为:搜索选择器 1 下的所有的子标签 选择器 2

1.3. 案例代码

准备代码:仅要求 div 下所有 font 子标签变为红色,其他颜色黑色

<div> 
    <span>
        <font>黑色字体 111</font>
        </span> 
            <font>变为红色字体 111</font> 
            黑色字体 222 
</div> 
<font>黑色字体 333</font>

示例:

image.png

效果:

image.png

4.并集选择器

1.1 概述及格式

并集选择器:指为多组不同的标签,设置相同的 CSS 样式。

格式:(用逗号分隔)

选择器 1,选择器 2 …..{

/*css 样式代码*/

}

意思为:为选择器 1 选择器 2 设置相同 CSS 样式

1.2. 案例代码

准备代码:仅要求<hr/>上面的所有字体变为红色,<hr/>下面的字体为黑色

<span>我是 span 内容体</span> 
<font>我是 font 内容体</font> 
<div class="d1">我想和 span 样式一样</div> 
<hr/> 
<div>我不想和别人样式一样</div>

示例:

image.png

效果:

image.png

注意:*通配符选择器因为效率极低,所以不建议使用。

建议使用并集选择器替代。

5.伪类选择器

1.1 概述及格式

伪类选择器:指不依靠元素 class 类名筛选,通过元素特征筛选的选择器。(鼠标悬停状态、点击

状态等)

作用:可以为 HTML 元素 设置更细致效果(某个动作 / 状态的效果、某个子元素效果)。

伪类选择器有很多种:链接伪类、结构伪类等。

本次讲解主要由链接伪类展开。

格式:(用冒号连接)

选择器:伪类{

/*css 样式代码*/

}

意思为:为选择器 1 选择器 2 设置相同 CSS 样式

1.2 链接伪类:常见 API 及案例代码

准备代码:要求 mya 超链接:

链接地址从未被点击时为:黑色 black

链接地址已经被点击过为:灰色 gray

鼠标悬停时为:红色 red

链接被点击一瞬间为:粉色 pink

<a class="mya" href="http://www.czxy.com">伪类示例</a> <hr/> 
<a href="http://www.czxy.com">正常链接</a>


常见的链接伪类值:建议的 设置顺序 LVHA

image.png

image.png

示例代码 1

image.png

1.3 结构伪类:示例代码

结构伪类非本章节主讲,我们先进行引入,在后面章节根据需求进行完善讲解。

结构伪类值包括: :root 、 :not 、 :only-child 、 :first-child 、 :last-child 等。

准备代码: div 下第一个子元素字体颜色变为红色, div 下最后一个子元素字体颜色变为蓝色

<div class="d1"> 
    <font>1</font> 
    <font>2</font> 
    <font>3</font> 
    <font>4</font> 
    <font>5</font> 
    <font>6</font> 
</div>

常见的结构伪类值:

image.png

示例代码:

image.png

image.png

1.4 伪类和伪元素的区别(了解)

1 、伪元素:不是 HTML 上真正的元素,在 HTML 不存在,可以为 HTML 中某元素的内容体追加

更细致

效果。

在 css 产生作用时,才会有创造一个新元素的效果。

:before

:after

:first-letter :first-line

以上效果都好像在内容体中追加了一个带有特殊样式的 span

2 、伪类选择器:可以为 HTML 中真正存在的元素 设置更细致效果(某个动作的效果、某个子元素

效果)

在 CSS 产生作用时,不会有创造新元素的效果,仅会在已有元素上设置效果。

:active :focus

:hover

:link

:visited

是设置元素在某个动作下的效果

:first-child

是设置子元素效果

总结:伪元素作用于 元素内容体,生效时会有追加特殊样式 span 的效果

伪类选择器 作用于 元素,生效时会设置元素动作效果和子元素效果

6.总结

image.png






相关文章
|
5天前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
78 4
|
23天前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
115 68
|
3天前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
15 4
|
3天前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
11 4
|
5天前
|
前端开发 JavaScript 搜索推荐
前端小白也能学会的高大上技巧:如何让你的网页支持暗黑模式?
【10月更文挑战第30天】随着现代网页设计的发展,暗黑模式已成为一种流行趋势,提升了用户的阅读体验并增强了网页的适应性。本文介绍了如何通过简单的HTML、CSS和JavaScript实现网页的暗黑模式。首先,定义两种主题的CSS样式;然后,使用JavaScript实现模式切换逻辑,并自动检测系统主题。通过这些步骤,前端小白也能轻松掌握暗黑模式的实现,提升网页的用户体验和个性化水平。
18 4
|
3天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
8 2
|
5天前
|
编解码 前端开发 开发者
前端开发的必修课:如何让你的网页在不同设备上完美呈现?
【10月更文挑战第30天】随着互联网的普及,用户访问网页的设备种类繁多。前端开发者需确保网页在不同设备上完美呈现。本文介绍了一些最佳实践,包括使用响应式设计、相对单位、灵活的图片和视频、测试与优化及考虑交互设计,帮助实现跨设备兼容。
16 2
|
5天前
|
缓存 前端开发 JavaScript
前端小白也能掌握的高级技巧:如何让你的网页支持PWA特性?
【10月更文挑战第30天】随着互联网技术发展,渐进式网页应用(PWA)成为提升用户体验的重要手段。本文通过一个案例,介绍如何为在线问答社区网页应用添加PWA特性。从创建基本结构、添加Service Worker、创建Manifest文件到测试PWA特性,详细展示了每一步的操作方法。适合前端小白学习参考。
8 2
|
9天前
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的10个技巧
【10月更文挑战第25天】在互联网时代,网页加载速度直接影响用户体验和搜索引擎排名。本文介绍了10个提升网页加载速度的技巧,包括减少HTTP请求、启用压缩、使用CDN、延迟加载非关键资源、优化图片、减少重定向、使用浏览器缓存、优化CSS和JavaScript、异步加载JavaScript以及代码分割。通过这些方法,可以显著提高网页性能,改善用户体验。
46 5
|
21天前
|
前端开发 Python
帮我用python作为网页前端输出“hallow world
帮我用python作为网页前端输出“hallow world