7.前端--CSS-复合选择器

news2024/10/2 22:17:55

1.什么是复合选择器

复合选择器是由两个多个基础选择器,通过不同的方式组合而成的,可以更准确、更高效的选择目标元素(标签)
常用的复合选择器包括:后代选择器子选择器并集选择器伪类选择器等等

2.后代选择器

定义

后代选择器又称为包含选择器可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

语法
格式:元素1 元素2 { 样式声明 }

上述语法表示选择元素 1 里面的所有元素 2 (后代元素)

语法说明:
  • 元素1 和 元素2 中间用空格隔开
  • 元素1 是父级,元素2 是子级,最终选择的是元素2
  • 元素2 可以是儿子也可以是孙子等,只要是元素1 的后代即可
  • 元素1 和 元素2 可以是任意基础选择器
例子:
ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

3.子选择器

定义

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。(简单理解就是选亲儿子元素)

语法
元素1 > 元素2 { 样式声明 }

上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2

语法说明:
  • 元素1 和 元素2 中间用 大于号 隔开
  • 元素1 是父级,元素2 是子级,最终选择的是元素2
  • 元素2 必须是亲儿子,其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器
例子:
div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

4.并集选择器

定义

并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分

语法
元素1,元素2 { 样式声明 }

上述语法表示选择元素1 和 元素2。

语法说明:
  • 元素1 和 元素2 中间用逗号隔开
  • 逗号可以理解为和的意思
  • 并集选择器通常用于集体声明
例子:
ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */

5.伪类选择器

定义

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

语法:
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。

6.链接伪类选择器

定义

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

语法:

伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。

a:link 没有点击过的(访问过的)链接

a:visited 点击过的(访问过的)链接

a:hover 鼠标经过的那个链接

a:active 鼠标正在按下还没有弹起鼠标的那个链接

语法说明:

为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。
因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。

例子:
 /* a 是标签选择器 所有的链接 */ 
 a { 
	 color: gray;
 }
 /* :hover 是链接伪类选择器 鼠标经过 */
 a:hover { 
	 color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
 }

7. :focus伪类选择器

定义

:focus 伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况 类表单元素才能获取

input:focus { 
 background-color:yellow;
}

当点击input标签时,就执行这个focus中的代码

8.复合选择器总结

在这里插入图片描述

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

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

相关文章

DAY06_SpringBoot—入门properties/YML文件lombok插件及使用

目录 1 SpringBoot1.1 SpringBoot介绍1.2 SpringBoot入门案例1.2.1 安装SpringBoot插件1.2.2 创建SpringBoot项目 1.3 关于SpringBoot项目说明1.3.1 关于POM.xml文件说明1.3.2 依赖配置项1.3.3 build标签 1.4 SpringBoot Maven操作1.4.1 项目打包1.4.2 java命令运行项目 1.5 关…

Vulnhub-dc3

靶场下载 https://download.vulnhub.com/dc/DC-3-2.zip 信息收集 # nmap -sn 192.168.1.0/24 -oN live.nmap Starting Nmap 7.94 ( https://nmap.org ) at 2024-01-18 19:49 CST Nmap scan report for 192.168.1.1 (192.168.1.1) Host is up (0.00022s latency). MAC …

MySQL不同插入方式性能对比实验

最近负责的项目需要数据同步入库MySQL,为了测速那种入库方式效率比较高,为此进行了以下的对比实验,在此记录一下 实验表单数据格式 实验代码 共三种方法对比 mutiSqlInsert: 一条一条插入,最后一次提交 singleSqlInsert&…

RedisConnectionException: Unable to connect to redis.xxx.com:6379

报错 org.springframework.data.redis.connection.PoolException: Could not get a resource from the pool; nested exception is io.lettuce.core.RedisConnectionException: Unable to connect to redis.xxx.com:6379at org.springframework.data.redis.connection.lettuc…

力扣日记1.21-【回溯算法篇】77. 组合

力扣日记:【回溯算法篇】77. 组合 日期:2023.1.21 参考:代码随想录、力扣 终于结束二叉树了!听说回溯篇也是个大头,不知道这一篇得持续多久了…… 77. 组合 题目描述 难度:中等 给定两个整数 n 和 k&#…

接口测试 03 -- 接口自动化思维 Requests库应用

1. 接口自动化思维梳理 1.1接口自动化的优点 接口测试自动化,简单来讲就是功能测试用例脚本化然后执行脚本,产生一份可视化测试报告。不管什么样的测试方式,都是为了验证功能与发现 BUG。那为什么要做接口测试自动化呢?一句话概括…

一文搞懂分布式session解决方案与一致性hash

一、问题的提出 1. 什么是Session? 用户使用网站的服务,需要使用浏览器与Web服务器进行多次交互。HTTP协议本身是无状态的,需要基于HTTP协议支持会话状态(Session State)的机制。具体的实现方式是:在会话开…

72.批量执行Redis命令的4种方式!

文章目录 前言一、Redis命令执行过程二、原生批量命令三、pipeline(管道)四、Lua脚本五、Redis事务六、Redis Cluster模式下该如何正确使用批量命令操作? 前言 在我们的印象中Redis命令好像都是一个个单条进行执行的,但实际上我们是可以批量执行Redis命…

探秘二维码:从原理到应用,一探无线黑科技

目录 一、前言 1.1 二维码的起源和发展 1.2 二维码的重要性和应用广泛性 二、二维码的原理 2.1 二维码的结构和编码方式 2.2 二维码的扫描和解码原理 2.3 二维码的纠错码原理 三、二维码的类型和特点 3.1 静态二维码和动态二维码 3.2 黑白二维码和彩色二维码 3.3 静…

详解C语言中`||`的短路机制

在C语言中,逻辑或运算符(||)是一种常用的逻辑运算符,用于组合多个条件表达式。与其他编程语言一样,C语言中的逻辑或运算符具有短路机制,这是一种非常重要的概念,本文将深入解释C语言中的||短路机…

【Redis】redis为什么快

​ 🍎个人博客:个人主页 🏆个人专栏:Redis ⛳️ 功不唐捐,玉汝于成 ​ 目录 前言 正文 结语 我的其他博客 前言 在当今的计算机应用领域,数据存储和高性能访问成为系统设计中至关重要的一环。Redis以…

一.Winform使用Webview2(Edge浏览器核心) 创建demo(Demo1)实现回车导航到指定地址

Winform使用Webview2创建demo1实现回车导航到指定地址 往期目录参考文档实现1.安装visual studio2.创建单窗口应用3.修改项目中的窗体名称MainForm4.添加按钮5.添加窗口Demo16.在Demo1中添加WebView2 SDK7.在Demo1窗体中选择添加textbox和webview28.在MainForm.cs窗体中添加but…

【开源】基于JAVA的智慧社区业务综合平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 业务类型模块2.2 基础业务模块2.3 预约业务模块2.4 反馈管理模块2.5 社区新闻模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 业务类型表3.2.2 基础业务表3.2.3 预约业务表3.2.4 反馈表3.2.5 社区新闻表 四、系统展…

数据结构期末复习(六)查找算法

查找算法 查找算法通常有两种常见的实现方式:顺序查找和二分查找。 顺序查找 顺序查找也称为线性查找,是最简单的一种查找算法。它从数据集的起点开始逐个比较每个元素,直到找到目标元素或者搜索到数据集的末尾。 示例代码: …

《WebKit 技术内幕》之六(3): CSS解释器和样式布局

3 WebKit布局 3.1 基础 当WebKit创建RenderObject对象之后,每个对象是不知道自己的位置、大小等信息的,WebKit根据框模型来计算它们的位置、大小等信息的过程称为布局计算(或者称为排版)。 图描述了这一过程中涉及的主要WebKit…

SpringCloud Alibaba 深入源码 - Nacos 和 Eureka 的区别(健康检测、服务的拉取和订阅)

目录 一、Nacos 和 Eureka 的区别 1.1、以 Nacos 注册流程来解析区别 一、Nacos 和 Eureka 的区别 1.1、以 Nacos 注册流程来解析区别 a)首先,我们的服务启动时。都会把自己的信息提交给注册中心,然后注册中心就会把信息保存下来. 注册的…

前后端分离多年,为何服务端渲染(SSR)重回风口浪尖?

前后端分离多年,为何服务端渲染(SSR)重回风口浪尖? 什么是服务端渲染? 咱们先搞明白个事儿,啥叫服务端渲染?服务端渲染的全称是 Server-Side Rendering,简称SSR。 简单说&#xf…

深入解析 JavaScript 中的 F.prototype

🧑‍🎓 个人主页:《爱蹦跶的大A阿》 🔥当前正在更新专栏:《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 JavaScript作为一门原型继承语言,函数的prototype属性在其中发挥着重…

基于CanvasLabel的Leaflet矢量数据免切片属性标注实践

目录 前言 一、Leaflet.CanvasLabel 1、开源地址 2、设置参数说明 二、组件集成 1、新建html文件 2、声明样式 3、定义矢量文本渲染器 4、定义地图 5、添加矢量数据 6、最终效果 总结 前言 在一般的业务场景中,针对小量的矢量数据,比如POI兴…

快速统计文件和文件夹大小

windows上没有方便统计各个层级文件夹文件大小的工具,于是自己做了一个 源码 https://gitee.com/chen227/calc-tree-space