2024-3-13,14(CSS)

1.复合选择器

有两个或者多个基础选择器,通过不同的方式组合而成。

目的是更加准确高效的选择目标元素(标签)

分类:

后代选择器:选中某个元素的所有后代元素

写法:父选择器 子选择器 {CSS属性},父子之间用空格隔开

子代选择器:选中某个元素的子代元素(最近的儿子)

选择器写法:父代选择器 > 子代选择器 {CSS属性},父子之间用>隔开

并集选择器:选择多组标签设置相同的样式

写法:选择器1,选择器2,选择器3.......选择器n {CSS属性},,选择器之间用,隔开

伪类选择器:伪类表示元素状态,可以选中元素的某个状态设置样式

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

2.CSS特性:继承性,层叠性,优先级

继承性:子级默认继承父级的文字控制属性。

层叠性:

相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性

不同的属性会叠加:不同的CSS属性都生效。

优先级:当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。

通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内选择器 < !important

选中标签的范围越大,优先级越低) 

3.结构伪类选择器

根据标签的结构关系来查找标签

nth-child括号里面可以写公式,来多选

4.伪元素选择器

创建虚拟元素(伪元素),用来摆放装饰性的内容。

其实就是在一个标签内部再放置一个标签。

5.盒子模型

作用:布局网页,摆放盒子和内容。

盒子模型的构成:

内容区域:width,height

内边距:padding

边框线:border

外边距:margin(盒子外面)

6.标准流:也叫文档流,指的是标签在页面中默认的排布规则,例如块元素默认独占一行,行内元素默认一行可以显示多个。 

7.flex布局:display:flex 属性可以把父容器变为弹性容器,容器中的子标签变为弹性盒子

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软考高级:软件工程单元测试(驱动模块、被测模块、桩模块)概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

爱奇艺 CTR 场景下的 GPU 推理性能优化

01 背景介绍 GPU 目前大量应用在了爱奇艺深度学习平台上。GPU 拥有成百上千个处理核心&#xff0c;能够并行的执行大量指令&#xff0c;非常适合用来做深度学习相关的计算。在 CV&#xff08;计算机视觉&#xff09;&#xff0c;NLP&#xff08;自然语言处理&#xff09;的模型…

Spring炼气之路(炼气一层)

目录 一、IOC 1.1 控制反转是什么&#xff1f; 1.2 什么是IOC容器&#xff1f; 1.3 IOC容器的作用 1.4 IOC容器存放的是什么&#xff1f; 二、DI 2.1 依赖注入是什么&#xff1f; 2.2 依赖注入的作用 三、IOC案例实现 3.1下载Maven 3.2 配置Maven中的settings.xml文…

考研C语言复习进阶(2)

目录 1. 字符指针 2. 指针数组 3. 数组指针 3.1 数组指针的定义 3.2 &数组名VS数组名 4. 函数指针 5. 函数指针数组 6. 指向函数指针数组的指针 7. 回调函数 8.三步辗转法 9. 指针和数组笔试题解析 10. 指针笔试题 指针的主题&#xff0c;我们在初级阶段的《指…

​​SQLiteC/C++接口详细介绍之sqlite3类(十一)

返回目录&#xff1a;SQLite—免费开源数据库系列文章目录 上一篇&#xff1a;​​SQLiteC/C接口详细介绍之sqlite3类&#xff08;十&#xff09; 下一篇&#xff1a;​​SQLiteC/C接口详细介绍之sqlite3类&#xff08;十二&#xff09;&#xff08;未发表&#xff09; 33.sq…

JavaWeb07-会话

目录 一、会话跟踪技术 1.概述 2.实现方式 3.Cookie &#xff08;1&#xff09;基本使用 &#xff08;2&#xff09;原理 &#xff08;3&#xff09;存活时间 &#xff08;4&#xff09;存储中文 4.Session &#xff08;1&#xff09;基本使用 &#xff08;2&#x…

C#,图论与图算法,寻找图(Graph)中的桥(Bridge)算法与源代码

1 图(Graph)中的桥(Bridge) 如果删除无向连通图中的边会断开该图的连接,则该边就是桥。对于断开连接的无向图,定义类似,桥接是一种边移除,它增加了断开连接的组件的数量。 与连接点一样,网桥代表连接网络中的漏洞,对于设计可靠的网络非常有用。例如,在有线计算机网…

哪些视频编辑软件最好用?会声会影怎么样?2024会声会影激活

随着数字化时代的到来&#xff0c;视频编辑软件的需求量也逐渐增加。为了满足用户的需求&#xff0c;市面上涌现了很多的视频编辑软件&#xff0c;让用户不知道该如何选择。今天我们来聊聊哪些视频编辑软件最好用&#xff0c;以及会声会影怎么样&#xff1f; 视频编辑软件的选…

分布式事务基础理论解析

一、概述 1.1 定义 为了解决java 多个节点之间数据一致性问题。产生的核心原因是&#xff1a;资源存储的分布性。比如多个数据库&#xff0c;或者Mysql和Redis的数据一致性等。 1.2 产生场景 跨JVM进程产生分布式事务。即服务A和服务B分别有对应的数据库跨数据库实例产生分…

Qt QTableWidget 实现行选中及行悬浮高亮

表格整行的 selected、hover 高亮需求很常见&#xff0c;但使用 Qt 提供的开箱即用的方法根本无法实现这个需求&#xff08;至少在当前的时间节点是不行的&#xff09;&#xff1b;想要实现这个效果必须要费一点点力气&#xff0c;我们尽量选择较为简单的方法。 话不多说&…

yolo项目中如何训练自己的数据集

1.收集自己需要标注的图片 2.打开网站在线标注网站 2.1 点击右下角Get Start 2.2点击这里上传自己的图片 上传成功后有英文的显示 点击左边的Object Detection&#xff0c;表示用于目标检测 2.3选择新建标签还是从本地加载标签 如果是本地加载标签&#xff08;左边&#…

Linux/Ubuntu/Debian从控制台启动程序隐藏终端窗口

如果你想从终端运行应用程序但隐藏终端窗口. 你可以这样做&#xff1a; 在后台运行&#xff1a; 你只需在命令末尾添加一个与号 (&) 即可在后台运行它。 例如&#xff1a; your_command &将 your_command 替换为你要运行的命令。 这将在后台启动该命令&#xff0c…

科研绘图二:箱线图(抖动散点)

R语言绘图系列—箱线图抖动散点 &#xff08;二&#xff09;: 科研绘图一&#xff1a;箱线图&#xff08;抖动散点&#xff09; 文章目录 R语言绘图系列---箱线图抖动散点&#xff08;二&#xff09;: 科研绘图一&#xff1a;箱线图&#xff08;抖动散点&#xff09; 前言一、…

中兴交换机与H3C交换机配置链路聚合802.3ad

难得见到一回中兴交换机 中兴交换机型号&#xff1a; ZX8902 这台中兴要与H3C交换机建立port-channel&#xff0c; 接口为access vlan 100 拓扑如下&#xff1a; 1 中兴交换机配置 1.1 创建 smart group&#xff0c;对&#xff0c;没有看错&#xff0c;中兴的port-channel叫…

【李沐论文精读】多模态论文串讲(上)和(下)精读

参考&#xff1a;多模态论文串讲上、多模态论文串讲下、多模态论文串讲 论文链接放在每一小节前面。 Review&#xff1a; ViLT论文的研究动机其实就是为了把目标检测从视觉端拿掉。图文多模态任务&#xff0c;关键是提取视觉特征和文本特征&#xff0c;然后对齐。在之前的多模态…

LeetCode 7 / 100

哈希表、双指针 哈希表两数之和字母异位词分组最长连续序列 双指针移动零盛最多水的容器三数之和接雨水 LeetCode 1.两数之和 LeetCode 49. 字母异位词分组 LeetCode 128. 最长连续序列 LeetCode [283. 移动零](https://leetcode.cn/problems/move-zeroes/?envTypestudy-plan-…

Python基础(八)之流程控制

Python基础&#xff08;八&#xff09;之流程控制 Python控制流程分为三种接口&#xff1a; 顺序结构选择结构循环结构 1、顺序结构 程序代码自上而下运行&#xff0c;逐条执行每一条Python代码&#xff0c;不重复执行任何代码&#xff0c;也不会跳过任何代码。 当语句与语…

第七篇【传奇开心果系列】Python自动化办公库技术点案例示例:深度解读数据分析数据挖掘的几个重要算法为代表的核心技术

传奇开心果博文系列 系列博文目录Python自动化办公库技术点案例示例系列 博文目录前言一、重要算法介绍二、回归分析示例代码三、聚类分析示例代码四、决策树示例代码五、关联规则挖掘示例代码六、神经网络示例代码七、支持向量机示例代码八、聚类分析示例代码九、主成分分析示…

【Hadoop大数据技术】——MapReduce经典案例实战(倒排索引、数据去重、TopN)

&#x1f4d6; 前言&#xff1a;MapReduce是一种分布式并行编程模型&#xff0c;是Hadoop核心子项目之一。实验前需确保搭建好Hadoop 3.3.5环境、安装好Eclipse IDE &#x1f50e; 【Hadoop大数据技术】——Hadoop概述与搭建环境&#xff08;学习笔记&#xff09; 目录 &#…

【集成开发环境】-VS Code:C/C++ 环境配置

简介 VS Code&#xff0c;全称Visual Studio Code&#xff0c;是一款由微软开发的跨平台源代码编辑器。它支持Windows、Linux和macOS等操作系统&#xff0c;并且具有轻量级、高效、可扩展等特点&#xff0c;深受广大开发者的喜爱。 VS Code拥有丰富的功能特性&#xff0c;包括…