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

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

文章目录:


1. 复合选择器

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

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

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

<span>span标签</span>

<div>
<span>文字颜色是绿色</span>
</div>

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

1.1 后代选择器

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

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

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

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

<span>span标签</span>
<div>
<span>文字颜色是绿色</span>
</div>

注意:

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

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

1.2 子代选择器

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

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

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

<span>span标签</span>
<div>
<span>文字颜色是绿色</span>
</div>

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

1.3 并集选择器

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

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

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

<div> div 标签</ div>
<p>p 标签</p>
<span>span 标签</span>

注意:

规范书写要逗号换行

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

1.4 交集选择器(了解)

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

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

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

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

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

p.box{
color: red ;
}

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

2.伪类选择器

2.1 伪类-文本

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

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

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

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

<body>
<div>这是一段文字</div>
</body>

2.2 伪类-超链接(拓展)

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

相关文章
|
5天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
5天前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
8天前
|
前端开发 开发者 Python
从零到一:Python Web框架中的模板引擎入门与进阶
在Web开发的广阔世界里,模板引擎是连接后端逻辑与前端展示的重要桥梁。对于Python Web开发者而言,掌握模板引擎的使用是从零到一构建动态网站或应用不可或缺的一步。本文将带你从基础入门到进阶应用,深入了解Python Web框架中的模板引擎。
14 3
|
6天前
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
7天前
|
存储 前端开发 JavaScript
浅谈Web前端安全策略xss和csrf,及又该如何预防?
该文章详细讨论了Web前端安全中的XSS(跨站脚本攻击)和CSRF(跨站请求伪造)攻击原理及其防范措施,帮助读者了解如何保护Web应用程序免受这两种常见安全威胁的影响。
浅谈Web前端安全策略xss和csrf,及又该如何预防?
|
7天前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
8天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
31 1
|
15天前
|
编解码 前端开发 JavaScript
web端 本地调用摄像头、前端摄像头
web端 本地调用摄像头、前端摄像头
|
21天前
|
前端开发
|
21天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
下一篇
无影云桌面