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

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.mzph.cn/news/646728.shtml

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

相关文章

定时器越走越快的原因

在上述例子中,本应每1秒输出一次,但在多次点击按钮后会变成每0.9秒、0.8秒、0.7秒… 就输出一次,即定时器时间间隔越来越短,这就是所谓的定时器越走越快。 其实原因很简单,在多次点击按钮时,多次创建了定时…

【卡梅德生物】单域抗体|纳米抗体|VHH文库构建

单域抗体,也称为VHH(Variable domain of heavy chain of HCAb)抗体或纳米抗体,是一种小型抗体分子。与传统抗体相比,VHH具有更小的分子尺寸、更高的稳定性和更易于工程化的特点,具有广泛的生物医学应用潜力…

LeetCode:670. 最大交换(Java 贪心)

目录 670. 最大交换 题目描述: 实现代码与解析; 贪心 原理思路: 670. 最大交换 题目描述: 给定一个非负整数,你至多可以交换一次数字中的任意两位。返回你能得到的最大值。 示例 1 : 输入: 2736 输出: 7236 解释…

flink基础概念之什么是时间语义

什么是时间语义 Flink支持三种不同的时间语义,以便处理流式数据中的事件时间、处理时间和摄入时间。 1. 处理时间(Processing Time) 处理时间的概念非常简单,就是指执行处理操作的机器的系统时间。 在这种时间语义下处理窗口非…

接口自动化测试实践

众所周知,接口自动化测试有着如下特点: 低投入,高产出。 比较容易实现自动化。 和UI自动化测试相比更加稳定。 如何做好一个接口自动化测试项目呢? 我认为,一个“好的”自动化测试项目,需要从“时间”…

05-Seata下SQL使用限制

不支持 SQL 嵌套不支持多表复杂 SQL(自1.6.0版本,MySQL支持UPDATE JOIN语句,详情请看不支持存储过程、触发器部分数据库不支持批量更新,在使用 MySQL、Mariadb、PostgreSQL9.6作为数据库时支持批量,批量更新方式如下以 Java 为例 …

掌握大语言模型技术: 推理优化

掌握大语言模型技术_推理优化 堆叠 Transformer 层来创建大型模型可以带来更好的准确性、少样本学习能力,甚至在各种语言任务上具有接近人类的涌现能力。 这些基础模型的训练成本很高,并且在推理过程中可能会占用大量内存和计算资源(经常性成…

C++:反向迭代器-reverse_iterator

目录 1.关于反向迭代器 2.反向迭代器的成员函数 1.构造 2.base 3.operator* 4.operator 5.operator-- 6.operator-> 7.operator[] 3.反向迭代器的模拟实现 小结 1.关于反向迭代器 在C中,可以使用反向迭代器来逆序遍历容器中的元素。反向迭代器是通过…

链表的中间结点,简单的快慢指针问题

总结 struct ListNode* middleNode(struct ListNode* head) {struct ListNode*fasthead;struct ListNode*slowhead;while( fast && fast->next)//结束条件{slowslow->next;fastfast->next->next;}return slow; }

组件冲突、data函数、组件通信

文章目录 1.组件的三大组成部分 - 注意点说明2.组件的样式冲突(用 scoped 解决)3.data是一个函数4.组件通信1.什么是组件通信?2.不同的组件关系 和 组件通信方案分类 5.prop详解prop 校验①类型校验②完整写法(类型,非…

面试项目问题

1. 你们这个项目多少人在做?人员分布是怎样的?做了多长时间? 我们项目组一共十个人,包括四个后端开发人员、两个前端开发人员、两个测试人员和两个产品经理。 从需求分析、设计、开发到测试上线到最后的维护阶段,整个项目的周期大概是六个月左右。 …

REVIT二次开发设置门垛高度

步骤1 步骤2 步骤3 using System; using System.Collections.Generic; using System.Linq; using System

Redis 持久化详解:RDB 与 AOF 的配置、触发机制和实际测试

什么是持久化? 就是 Redis 将内存数据持久化到硬盘,避免从数据库恢复数据。之所以避免从数据库恢复数据是因为后端数据通常有性能瓶颈,大量数据从数据库恢复可能会给数据库造成巨大压力。 Redis 持久化通常有 RDB 和 AOF 两种方式&#xff…

《开始使用PyQT》 第01章 PyQT入门 02 安装Python3和PyQT6

02 安装Python3和PyQT6 《开始使用PyQT》 第01章 PyQT入门 02 安装Python3和PyQT6 So that all readers are on the same page, let’s begin by installing or updating your version of Python. 为了让所有读者都能理解,让我们从安装或更新 Python 版本开始。 …

计算机网络 第5章(运输层)

系列文章目录 计算机网络 第1章(概述) 计算机网络 第2章(物理层) 计算机网络 第3章(数据链路层) 计算机网络 第4章(网络层) 计算机网络 第5章(运输层) 计算机…

vue3之 websoket发送消息

1.封装websoket var ws null; //建立的连接 var lockReconnect false;//是否真正建立连接 var timeout 6 * 1000 * 5;//30秒一次心跳 var timeoutObj null;//心跳心跳倒计时 var serverTimeoutObj null;//心跳倒计时 var timeoutnum null;//断开 重连倒计时 var global_…

DA14531平台secondary_bootloade工程修改笔记

DA14531平台secondary_bootloade工程修改笔记 1.支持在线仿真 初始时加入syscntl_load_debugger_cfg(); 表示可以重复Jlink连接调试仿真 2.支持串口烧录,和支持单线线写 utilities\secondary_bootloader\includes\bootloader.h /************** 2-wire UART supp…

Siamese network 孪生神经网络--一个简单神奇的结构

1.名字的由来 Siamese和Chinese有点像。Siam是古时候泰国的称呼,中文译作暹罗。Siamese也就是“暹罗”人或“泰国”人。Siamese在英语中是“孪生”、“连体”的意思,这是为什么呢? 十九世纪泰国出生了一对连体婴儿,当时的医学技术…

点赞!HashData连续三年获评数据猿“最具投资价值企业奖”

近日,由上海市经济和信息化委员会、上海市科学技术委员会指导,数据猿和上海大数据联盟共同主办的“第六届金猿季&魔方论坛——大数据产业发展论坛”在上海举行。本次活动以“小趋势大未来”为主题,展示了大数据与人工智能、云计算、5G等新…

【jetson笔记】ubuntu设置代理解决访问github问题

目录 手机开启热点jetson设置代理查询手机ip地址设置反向代理设置全局代理仅设置github全局代理 手机开启热点 手机开启热点并打开clashclash中设置-覆写-启用允许来自互联网的连接确保手机可以访问githubjetson设备连接手机热点 jetson设置代理 查询手机ip地址 设置-我的设…