【前端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教学高级篇 3.4 Web开发

系列目录 上一篇&#xff1a;白骑士的Python教学高级篇 3.3 数据库编程 在现代软件开发中&#xff0c;Web开发占据了重要的一席之地。通过Web开发&#xff0c;我们可以创建从简单的个人博客到复杂的电子商务网站等各种应用。在Python的生态系统中&#xff0c;Flask和Django是两…

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

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

Java后端开发的最佳工程实践与规范

Java后端开发的最佳工程实践与规范 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨Java后端开发中的最佳工程实践与规范&#xff0c;这些实践可以…

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

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

拓扑学习系列(1)拓扑球与拓扑环面与同胚

拓扑球与拓扑环面 在拓扑学中&#xff0c;"Topological Sphere" 和 "Topological Torus" 是两种不同的拓扑空间&#xff0c;它们具有特定的拓扑性质和几何特征。 Topological Sphere&#xff08;拓扑球&#xff09;&#xff1a; 拓扑球是一个二维曲面&…

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

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

电脑有线网卡和无线网卡的MAC地址

电脑上的无线网卡和有线网卡是两种不同类型的网络接口卡&#xff0c;它们各自有不同的功能和连接方式。 无线网卡&#xff1a; 功能&#xff1a;无线网卡允许计算机通过无线信号连接到网络&#xff0c;通常是Wi-Fi网络。连接方式&#xff1a;无需物理电缆&#xff0c;通过无线…

编程与教学的奇妙交织:探索未来的教育模式

编程与教学的奇妙交织&#xff1a;探索未来的教育模式 在当今快速发展的科技时代&#xff0c;编程与教学之间的融合已经不再是遥不可及的梦想&#xff0c;而是逐渐成为教育领域的一股新浪潮。本文将从四个方面、五个方面、六个方面和七个方面深入探讨编程与教学的奇妙交织&…

Mac批量替换文件夹下所有文件内容

今天接了一个小需求&#xff0c;将文件夹下字段为% XXDM %替换成#{XXDM} 在苹果系统&#xff08;macOS&#xff09;下&#xff0c;可以使用命令行工具find结合sed来实现对A文件夹下所有文件内容的批量替换。具体操作步骤如下&#xff1a; 1、打开终端&#xff08;Terminal&am…

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

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

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

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

Spring 框架中都用到了哪些设计模式:单例模式、策略模式、代理模式

Spring 框架是一个功能强大的企业级应用开发框架&#xff0c;它使用了多种设计模式来提高代码的可维护性、可扩展性和可重用性。以下是 Spring 框架中常见的几个设计模式&#xff0c;并简要说明它们的应用场景&#xff1a; 1. 单例模式&#xff08;Singleton Pattern&#xff…

SpringCloud_Eureka注册中心

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

白骑士的Python教学实战项目篇 4.1 数据分析与可视化

系列目录 上一篇&#xff1a;白骑士的Python教学高级篇 3.4 Web开发​​​​​​​ 在本篇内容中&#xff0c;我们将介绍如何使用Python进行数据分析与可视化。数据分析与可视化是数据科学的重要组成部分&#xff0c;能够帮助我们从数据中提取有价值的信息和洞察。我们将使用P…

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

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

MPP和Hadoop的架构与场景分析

1、架构&#xff1a; MPP&#xff1a; MPP (Massively Parallel Processing)大规模并行处理&#xff0c;最开始的设计目的是为了消除共享资源的使用。 MPP数据库是&#xff1a;采用非共享架构&#xff08;Shared Nothing&#xff09;架构的分布式并行结构化数据库集群&#xff…

PyTorch从零开始实现LSTM

文章目录 LSTM基础理论从零开始实现LSTM简洁版LSTM实现参考资料 LSTM基础理论 关于LSTM的基础理论不再赘述&#xff0c;可以参考资料&#xff1a; RNN神经网络-LSTM模型结构https://github.com/ShusenTang/Dive-into-DL-PyTorch/blob/master/docs/chapter06_RNN/6.8_lstm.md …