【前端web入门第四天】01 复合选择器与伪类选择器

简介: 本文档详细介绍了CSS中的复合选择器与伪类选择器。复合选择器包括后代选择器、子代选择器、并集选择器和交集选择器,能够更精确地定位和样式化元素。后代选择器用于选中某元素的所有后代,子代选择器仅选中直接子元素。并集选择器可为多个标签设置相同样式,而交集选择器则选中同时满足多个条件的元素。此外,还介绍了伪类选择器,如鼠标悬停效果和超链接的不同状态。

文章目录:


1. 复合选择器

什么叫复合选择器?
由两个或多个基础选择器,通过不同的方式组合而成。

复合选择器的作用是什么?
更准确、更高效的选择目标元素(标签)

一个复合选择器的代码案例?

<span>span标签</span>

<div>
<span>文字颜色是绿色</span>
</div>
AI 代码解读

如何准确的找到复合选择器中某一个选择器的位置,并给他们添加样式呢?
⬇⬇⬇⬇⬇⬇
后代选择器

1.1 后代选择器

后代选择器是干什么的?
选中某元素的后代元素。

选择器的写法是什么?
父选择器 子选择器{ CSS属性},父子选择器之间用空格隔开。

一个后代选择器的代码案例?

<style>
    div span {
    
    
        color: red;
}
</style>

<span>span标签</span>
<div>
<span>文字颜色是绿色</span>
</div>
AI 代码解读

注意:

后代选择器,选中所有后代,包含儿子、孙子、重孙子...

我们不想选中那么多,只想选中他的儿子怎么办
⬇⬇⬇⬇⬇⬇
子代选择器

1.2 子代选择器

写法是怎么样的?
后代选择器是 父选择器 子选择器
子代选择器是中间加上一个大于号 父选择器>子选择器

一个子代选择器的代码案例?

<style>
    div > span {
    
    
        color: red;
}
</style>

<span>span标签</span>
<div>
<span>文字颜色是绿色</span>
</div>
AI 代码解读

多个标签使用相同的样式,缩写代码量的写法
⬇⬇⬇⬇⬇⬇
并集选择器

1.3 并集选择器

并集选择器的作用?
选中多组标签设置相同的样式。

选择器的写法?
选择器1,选择器2,...,选择器N{ CSS属性},选择器之间用,隔开

<style>
div,
p,
span {
    
    
color: red;
}
</style>

<div> div 标签</ div>
<p>p 标签</p>
<span>span 标签</span>
AI 代码解读

注意:

规范书写要逗号换行

只想让同一个类的某种标签显示某种样式,而不是这个类的全部
⬇⬇⬇⬇⬇⬇
交集选择器

1.4 交集选择器(了解)

交集选择器的作用?
选中同时满足多个条件的元素。

一个交集选择器的应用场景代码?

<p class="box">p标签,使用了类选择器box</p>
<P>p标签</p>
<div class="box">div标签,使用了类选择器box</div>
AI 代码解读

我们的目标是让p标签中的box类显示为红色

交集选择器的写法
选择器写法∶选择器1选择器2{CSS属性},选择器之间连写,用点连接。

p.box{
color: red ;
}
AI 代码解读

注意:如果交集选择器中有标签选择器,==标签选择器必须书写在最前面==。

2.伪类选择器

2.1 伪类-文本

伪类选择器有什么用?
鼠标放在哪里,哪里就变色(改变样式),这是hover的用法.
进一步来说,就是可以在交互的过程中,改变样式

鼠标悬停状态的写法?
鼠标悬停状态:选择器:hover { CSS属性}

一个使用hover的代码?
鼠标悬停文字上方会变红

 <style>
    div:hover{
    
    
        color: red;
    }
    </style>

<body>
<div>这是一段文字</div>
</body>
AI 代码解读

2.2 伪类-超链接(拓展)

超链接一共有四个状态
image.png

目录
打赏
0
31
32
1
118
分享
相关文章
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
98 3
|
9天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
27 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
Spring Boot 入门:简化 Java Web 开发的强大工具
Spring Boot 是一个开源的 Java 基础框架,用于创建独立、生产级别的基于Spring框架的应用程序。它旨在简化Spring应用的初始搭建以及开发过程。
106 6
Spring Boot 入门:简化 Java Web 开发的强大工具
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
38 3
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
612 1
前端入门教程(二)Web前端与HTML简介
一 web1.0时代的网页制作 网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。 例如一篇QQ日志、一篇博文等展示性文章。
2541 0

热门文章

最新文章

  • 1
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    3
  • 2
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    31
  • 3
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    61
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    27
  • 5
    巧用通义灵码,提升前端研发效率
    93
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    143
  • 7
    详解智能编码在前端研发的创新应用
    100
  • 8
    智能编码在前端研发的创新应用
    83
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    124