【前端CSS3】一篇搞懂各类常用选择器(黑马程序员)

文章目录

  • 一、前言🚀🚀🚀
  • 二、正文:
    • 2.1 基础选择器
      • 2.1.1 标签选择器
      • 2.1.2 类选择器
      • 2.1.3 id选择器
      • 2.1.4 通配符选择题
      • 2.1.5 类选择器与id选择器区别☀️☀️☀️
      • 2.1.6 基础选择器总结🚀
    • 2.2 复合类选择器
      • 2.2.1 后代选择器(重要)
      • 2.2.1 子元素选择器(重要)
  • 三、选择器应用:☀️
    • 3.1 使用类选择器画盒子
    • 3.2 类选择器-多类名
      • 3.2.1 多类名的作用
      • 3.2.2 多类名使用方式


一、前言🚀🚀🚀

在这里插入图片描述

☀️
回报不在行动之后,回报在行动之中。


这个系列可以叫作《前端从零开始系列》,因为我打算就是花一个周期时间,来过一遍CSS+JS个人觉得笔记重点且常见的知识点,并且总结起来,如这一篇CSS选择器,归纳各类选择器,将是这个系列的开篇之作。为了方便前端CSS3样式与JS知识的总结,请期待这个系列的更新吧。


二、正文:

2.1 基础选择器

  选择器分为基础选择器和复合选择器两大类。
在这里插入图片描述

2.1.1 标签选择器

在这里插入图片描述
在这里插入图片描述

代码块如下图:

在这里插入图片描述

2.1.2 类选择器

在这里插入图片描述

然后这里我们有一些类命名规则:如下图

在这里插入图片描述
  

2.1.3 id选择器

在这里插入图片描述
注意下图:

在这里插入图片描述
  

2.1.4 通配符选择题

在这里插入图片描述
  

在这里插入图片描述
  
在这里插入图片描述

2.1.5 类选择器与id选择器区别☀️☀️☀️

  
在这里插入图片描述

2.1.6 基础选择器总结🚀

在这里插入图片描述
  


2.2 复合类选择器

在这里插入图片描述

2.2.1 后代选择器(重要)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2.2.1 子元素选择器(重要)

三、选择器应用:☀️

3.1 使用类选择器画盒子

  如何设计下面的案例呢?

在这里插入图片描述

首先div三个盒子

在这里插入图片描述
  
在这里插入图片描述

div它本身就是一个盒子。

3.2 类选择器-多类名

3.2.1 多类名的作用

我们可以看到淘宝的官网设计就是一个div里面设计多个类名。

在这里插入图片描述

3.2.2 多类名使用方式

在这里插入图片描述

在这里插入图片描述

优点:

在这里插入图片描述
  

在这里插入图片描述

  
  
  
  

Alt

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

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

相关文章

Linux系统编程:信号

目录 1.信号概念 2.信号产生 2.1 终端 2.2 系统调用 2.3 硬件异常 2.4 软件条件 2.5 小结 3. 进程退出时的核心转储问题 4. 信号捕捉初识 5. 阻塞信号 5.1 相关概念 5.2 在内核中的表示 6. 信号捕捉 6.1 知识铺垫 6.2 信号捕捉流程 6.3 sigset_t 6.4 信号集操…

CTFHUB-SSRF-上传文件

通过file协议访问flag.php文件内容 ?urlfile:///var/www/html/flag.php 右键查看页面源代码&#xff0c;发现需要从内部上传一个文件这样才能正常获取到flag ?urlhttp://127.0.0.1/flag.php 发现无提交按钮&#xff0c;构造一个 <input type"submit" name&qu…

RabbitMQ 之 延迟队列

目录 ​编辑一、延迟队列概念 二、延迟队列使用场景 三、整合 SpringBoot 1、创建项目 2、添加依赖 3、修改配置文件 4、添加 Swagger 配置类 四、队列 TTL 1、代码架构图 2、配置文件代码类 3、生产者 4、消费者 5、结果展示 五、延时队列优化 1、代码架构图 …

Python番外篇之责任转移:有关于虚拟机编程语言的往事

编程之痛 如果&#xff0c;你像笔者一样&#xff0c;有过学习或者使用汇编语言与C、C等语言的经历&#xff0c;一定对下面所说的痛苦感同身受。 汇编语言 将以二进制表示的一条条CPU的机器指令&#xff0c;以人类可读的方式进行表示。虽然&#xff0c;人类可读了&#xff0c…

使用deep修改前端框架中的样式

目录 1.deep的作用 2.使用方式 3.特别说明 scoped 的实现原理&#xff1a; !important 1.deep的作用 /deep/、::v-deep 和 :deep 都是用于穿透组件作用域的选择器。它们的主要目的是允许开发者在父组件中直接选择并样式化子组件内部的元素&#xff0c;即使这些元素被封装在…

JVM原理(九):JVM虚拟机工具之可视化故障处理工具

1. JHSDB:基于服务性代理的调试工具 JHSDB是一款基于服务性代理实现的进程外调试工具。 服务性代理是HotSpot虚拟机中一组用于映射Java虚拟机运行信息的、主要基于Java语言实现的API集合。 2. JConsole:Java监视与管理控制台 JConsole是一款基于JMX的可视化监视、管理工具。…

千益畅行,旅游卡,如何赚钱?

​ 赚钱这件事情&#xff0c;只有自己努力执行才会有结果。生活中没有幸运二字&#xff0c;每个光鲜亮丽的背后&#xff0c;都是不为人知的付出&#xff01; #旅游卡服务#

springboot拦截器,ThreadLocal(每个线程的公共区域)

拦截器 配置信息&#xff08;拦截所有请求&#xff09; 其实这种可以作为springAOP作日志记录

SpringCloud_Eureka注册中心

概述 Eureka是SpringCloud的注册中心。 是一款基于REST的服务治理框架&#xff0c;用于实现微服务架构中的服务发现和负载均衡。 在Eureka体系中&#xff0c;有两种角色: 服务提供者和服务消费者。 服务提供者将自己注册到Eureka服务器&#xff0c;服务消费者从Eureka服务器中…

软件著作权申请:保障开发者权益,促进软件创新

一、引言 在数字化时代&#xff0c;软件作为信息技术的核心&#xff0c;已成为推动社会进步和经济发展的重要力量。然而&#xff0c;随着软件产业的蓬勃发展&#xff0c;软件侵权和抄袭现象也日益严重。为了保护软件开发者的合法权益&#xff0c;促进软件产业的健康发展&#…

摄影后期色彩管理流程(Lightroom篇)

在摄影后期处理中&#xff0c;色彩管理是确保图像从捕捉到输出的一致性和准确性的关键。Lightroom 和 Photoshop 其实已经将这套色彩管理流程作为默认选项&#xff0c;如果实质操作时仍存在色彩偏差的问题&#xff0c;可参考以下内容。 ProPhoto RGB > Adobe RGB > sRGB …

linux 控制台非常好用的 PS1 设置

直接上代码 IP$(/sbin/ifconfig eth0 | awk /inet / {print $2}) export PS1"\[\e[35m\]^o^\[\e[0m\]$ \[\e[31m\]\t\[\e[0m\] [\[\e[36m\]\w\[\e[0m\]] \[\e[32m\]\u\[\e[0m\]\[\e[33m\]\[\e[0m\]\[\e[34m\]\h(\[\e[31m\]$IP\[\e[m\])\[\e[0m\]\n\[\e[35m\].O.\[\e[0m\]…

Golang内存分配

Go内存分配语雀笔记整理 Golang内存模型设计理念思考核心代码阅读mspanmcachemcentral中心缓存mheap分配过程 Golang内存模型设计理念思考 golang内存分配基于TCmalloc模型&#xff0c;它核心在于&#xff1a;空间换时间&#xff0c;一次缓存&#xff0c;多次复用&#xff1b;…

HarmonyOS开发探索:父子组件手势绑定问题处理

场景一&#xff1a;父子组件同时绑定手势的冲突处理 效果图 方案 在默认情况下&#xff0c;手势事件为非冒泡事件&#xff0c;当父子组件绑定相同的手势时&#xff0c;父子组件绑定的手势事件会发生竞争&#xff0c;最多只有一个组件的手势事件能够获得响应&#xff0c;默认子…

二、基础—常用数据结构:列表、元祖、集合、字典、函数等(爬虫及数据可视化)

二、基础—常用数据结构&#xff1a;列表、元祖、集合、字典、函数等&#xff08;爬虫及数据可视化&#xff09; 1&#xff0c;字符串2&#xff0c;最常用的是列表&#xff08;重点掌握&#xff09;3&#xff0c;元组4&#xff0c;字典&#xff08;重要&#xff09;5&#xff0…

【CSS in Depth 2 精译】2.3 告别像素思维

当前内容所在位置 第一章 层叠、优先级与继承第二章 相对单位 2.1 相对单位的威力 2.1.1 响应式设计的兴起 2.2 em 与 rem 2.2.1 使用 em 定义字号2.2.2 使用 rem 设置字号 2.3 告别像素思维 ✔️2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 2.3 告别…

3D交互可视化编辑器求推荐,最好是针对企业级使用的?

企业级使用的3D交互可视化编辑器&#xff0c;支持编辑和调整2D、3D渲染及交互设置&#xff0c;以下几款可以关注了解一下&#xff1a; 1、Unity&#xff1a;一个广泛使用的跨平台游戏引擎&#xff0c;由Unity Technologies开发。支持开发者创建2D和3D游戏、交互式应用以及虚拟…

pdf压缩,pdf压缩在线网页版,在线压缩pdf网站

在数字化时代&#xff0c;pdf文件已经成为我们工作、学习和生活中不可或缺的一部分。然而&#xff0c;pdf文件往往体积庞大&#xff0c;传输效率低下&#xff0c;还占用大量存储空间。如何在不影响文件质量的前提下&#xff0c;减小pdf文件的大小呢&#xff1f;今天&#xff0c…

74HC595芯片验证

目录 0x00 74595芯片简介0x01 实现原理 0x00 74595芯片简介 74595芯片有很多种封装&#xff0c;不管是贴片的还是直插式的&#xff0c;它们的引脚定义都如下图所示&#xff1a; 其中 &#xff1a; Q0-Q7为并行数据输出口&#xff0c;可以输出高低电平。OE 为使能引脚&#…

MySQL之高可用性和应用层优化(一)

高可用性 故障转移和故障恢复 在应用中处理故障转移 有时候让应用来处理故障转移会更加简单或者更加灵活。例如&#xff0c;如果应用遇到一个错误&#xff0c;这个错误外部观察者正常情况下是无法察觉的&#xff0c;例如关于数据库损坏的错误日志信息&#xff0c;那么应用可…