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

在这里插入图片描述
文章目录:

  • 1. 复合选择器
    • 1.1 后代选择器
    • 1.2 子代选择器
    • 1.3 并集选择器
    • 1.4 交集选择器(了解)
  • 2.伪类选择器
    • 2.1 伪类-文本
    • 2.2 伪类-超链接(拓展)

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 伪类-超链接(拓展)

超链接一共有四个状态

选择器作用
:link访问前
:visited访问后
:hover鼠标悬停
:active点击时激活
注意:
如果要给超链接设置以上四个状态,需要按LVHA的顺序书写。
在工作中,一般情况下,只用hover.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/675515.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

158基于matlab的用于分析弧齿锥齿轮啮合轨迹的程序

基于matlab的用于分析弧齿锥齿轮啮合轨迹的程序&#xff0c;输出齿轮啮合轨迹及传递误差。程序已调通&#xff0c;可直接运行。 158 matlab 弧齿锥齿轮啮合轨迹 传递误差 (xiaohongshu.com)

RedissonClient妙用-分布式布隆过滤器

目录 布隆过滤器介绍 布隆过滤器的落地应用场景 高并发处理 多个过滤器平滑切换 分析总结 布隆过滤器介绍 布隆过滤器&#xff08;Bloom Filter&#xff09;是1970年由布隆提出的。它实际上是一个很长的二进制向量和一系列随机映射函数。布隆过滤器可以用于检索一个元素是…

openssl3.2 - exp - RAND_bytes_ex

文章目录 openssl3.2 - exp - RAND_bytes_ex概述笔记END openssl3.2 - exp - RAND_bytes_ex 概述 生成随机数时, 要检查返回值是否成功, 不能认为一定是成功的(官方文档上有说明). 生成随机数的API, 和库上下文有关系, 使用RAND_bytes_ex()比RAND_bytes()好些. 笔记 /*! * …

SolidWorks的抽壳

抽壳在建模的时候是比较常见的要求&#xff0c;这里废话不多说&#xff0c;直接开始实例操作。 文章目录 一、规则实体抽壳2、多面抽壳3、空心化抽壳 二、椎体抽壳三、不规则实体抽壳1、不规则实体2、部分实体抽壳 文章随时可能更新&#xff0c;请关注文章原出处&#xff1a; …

LeetCode:210课程表Ⅱ(图论:拓扑排序判断是否有环)

做本题之前最好先做了LeetCode&#xff1a;207课程表&#xff0c;见本人另一篇博客http://t.csdnimg.cn/vSXgN 题目 现在你总共有 numCourses 门课需要选&#xff0c;记为 0 到 numCourses - 1。给你一个数组 prerequisites &#xff0c;其中 prerequisites[i] [ai, bi] &am…

sql常用函数积累(非窗口函数)

1.concat 在 SQL 中&#xff0c;concat函数用于将两个或多个字符串值连接成一个字符串 例如&#xff0c;如果有一个包含姓氏&#xff08;last_name&#xff09;和名字&#xff08;first_name&#xff09;的表&#xff0c;可以使用 CONCAT 来生成一个完整的姓名&#xff1a; …

JVM之GC垃圾回收

GC垃圾回收 如何判断对象可以回收 引用计数法 如果有对象引用计数加一&#xff0c;没有对象引用&#xff0c;计数减一&#xff0c;如果计数为零&#xff0c;则回收 但是如果存在循环引用&#xff0c;即A对象引用B对象&#xff0c;B对象引用A对象&#xff0c;会造成内存泄漏 可…

Gitlab和Jenkins集成 实现CI (二)

Gitlab和Jenkins集成 实现CI (一) Gitlab和Jenkins集成 实现CI (二) Gitlab和Jenkins集成 实现CI (三) 配置Gitlab api token 配置 Gitlab 进入gitlab #mermaid-svg-t84fR8wrT4sB4raQ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:…

【芯片设计- RTL 数字逻辑设计入门 6 -- 带同步复位的D触发器 RTL实现及testbench 验证】

文章目录 带同步复位的D触发器Verilog 代码testbench 代码编译及仿真问题小结 带同步复位的D触发器 同步复位 &#xff1a;复位只能发生在在clk信号的上升沿&#xff0c;若clk信号出现问题&#xff0c;则无法进行复位。 Verilog 代码 // timescale ins/1nsmodule flopr (inpu…

第60讲公共Tabs组件封装

新建Tabs组件 Tabs.wxml <view class"tabs"><view class"tabs_title"><viewbindtap"handleItemTap"data-index"{{index}}"wx:for"{{tabs}}"wx:key"id"class"title_item {{item.isActive?ac…

Django(十)

1. Ajax请求 浏览器向网站发送请求时&#xff1a;URL 和 表单的形式提交。 GETPOST 特点&#xff1a;页面刷新。 除此之外&#xff0c;也可以基于Ajax向后台发送请求&#xff08;偷偷的发送请求&#xff09;。 依赖jQuery编写ajax代码 $.ajax({url:"发送的地址"…

如何利用chatgpt提升工作效率?

在数字化和信息化的时代&#xff0c;人工智能技术已经深入到了我们生活的方方面面。其中&#xff0c;ChatGPT作为当前热门的人工智能技术&#xff0c;以其强大的自然语言处理能力和广泛的应用场景&#xff0c;正逐渐改变着我们的工作方式&#xff0c;为我们提高工作效率提供了全…

电脑服务器离线安装.net framework 3.5解决方案(错误:0x8024402c )(如何确定当前系统是否安装NET Framework 3.5)

问题环境&#xff1a; 日常服务的搭建或多或少都会有需要到NET Framework 3.5的微软程序运行框架&#xff0c;本次介绍几种不同的安装方式主要解决运行在Windows 2012 以上的操作系统的服务。 NET Framework 3.5 是什么&#xff1f; .NET Framework是微软公司推出的程序运行框架…

BTC交易数据 - 文章索引

BTC交易数据系列文章索引 如果你对比特币交易技术感兴趣&#xff0c;这一系列深度解析文章绝对值得一读。从 BTC 交易数据的总览、VarInt 类型的详解&#xff0c;到 nLockTime 的应用和比特币脚本的执行过程&#xff0c;每篇文章都揭示了比特币交易背后的精妙机制。无论你是初学…

vscode +markdown 的安装和使用

文章目录 前言一、vscode markdown 是什么&#xff1f;1.vscode是什么&#xff1f;2.markdown 是什么&#xff1f; 二、安装步骤1.下载2.安装 三、安装插件1.安装 Markdown All in One2.安装 Markdown Preview Enhanced3. Paste Image v1.0.44.LimfxCodeExv0.7.105.Code Spell …

【小程序】基础API——多语言API接口介绍

ty.getLangContent 获取多语言 需引入BizKit&#xff0c;且在>3.0.0版本才可使用 参数 Object object 属性类型默认值必填说明completefunction否接口调用结束的回调函数&#xff08;调用成功、失败都会执行&#xff09;successfunction否接口调用成功的回调函数failfunc…

问题:孔隙比总是1.0。 #知识分享#微信

问题&#xff1a;孔隙比总是1.0。 /ananas/latex/p/1242 参考答案如图所示

深度学习技巧应用36-深度学习模型训练中的超参数调优指南大全,总结相关问题与答案

大家好,我是微学AI,今天给大家介绍一下深度学习技巧应用36-深度学习模型训练中的超参数调优指南大全,总结相关问题与答案。深度学习模型训练中的调优指南大全概括了数据预处理、模型架构设计、超参数优化、正则化策略和训练技巧等多个关键方面,以提升模型性能和泛化能力。 …

【Java】苍穹外卖 Day01

苍穹外卖-day01 课程内容 软件开发整体介绍苍穹外卖项目介绍开发环境搭建导入接口文档Swagger 项目整体效果展示&#xff1a; 管理端-外卖商家使用用户端-点餐用户使用当我们完成该项目的学习&#xff0c;可以培养以下能力&#xff1a; 1. 软件开发整体介绍 作为一名软件开…

arm 平台安装snort3

本文来自原创,转载请说明来源。谢谢配合。 选择初衷 最近在学习渗透相关课程,回想起曾经拥有自己的域名和服务器的经历。不幸的是,服务器被注入了木马文件,起初并没有察觉。直到我加入了定时任务,才发现了这个问题。当时我下定决心要打造一个安全的网站,以保护自己的网…