CSS基础概念之选择器类型

CSS选择器类型

选择器表示元素在树结构中的特定模式。选择器(selector)术语指的是,简单选择器(simple selector),复合选择器(compound selector),复杂选择器(complex selector),或者选择器列表(selector list)。选择器的主题是任何被选择器被定义的元素;即与该选择器匹配的任何元素。

简单选择器是元素上的一个条件。 类型选择器(class-selector),通用选择器(universal-selector),属性选择器(attribute-selector),类选择器(type-selector),ID选择器(id-selector),或者伪类(pseudo-class)都是简单选择器。当本说明书中定义的简单选择器根据文档语言准确地描述了给定元素时,该给定元素被称为与该简单选择器匹配。

复合选择器是一个没有被组合子分割的简单选择器组成的序列,表示一组条件同时选择一个元素。如果符合选择器包含类型选择器或通用选择器,这个选择器必须在序列中第一个出现。在序列中只允许出现一个类型选择器或通用选择器。当元素符合复合选择器中的所有简单选择器则该元素才匹配了这个复合选择器。

注意:空白字符表示后端组合子,在复合选择器中,简单选择器之间不允许有空格。

伪复合选择器是伪类选择器,之后可选的可以跟一个伪类选择器,之前可选的可以加一个复合选择器或者伪复合选择器,但不能有任何组合子。当伪元素具有指定的伪元素名称,与任何伪类所表示的额外条件匹配,并具有由相邻的前一个选择器表示的起源元素时,伪元素与伪复合选择器匹配。如果没有相邻的前一个选择器,则假定为通用选择器。(例如,.foo ::before 等同于 .foo *::before,并且与 .foo::before 不同。)

例如,在.foo::before:hover中,.foo是复合选择器,而::before:hover是伪复合选择器。然而在.foo::before::marker中,::before和::marker是独立的伪复合选择器.

注意:伪复合选择器不是复合选择器,不能使用在明确说明只能使用复合选择器的地方。伪复合选择器的作用就好像它们自己携带了一个组合子,表达了它们与原始元素的关系,就像>组合子表达了与父元素的关系一样。

组合子描述的是两个元素之间的关系,这两个元素由组合子两边的复合选择器提供。在4级选择器中组合子包括:后代组合子(空格),子组合子(U+003E, >),下一个兄弟组合子(U+002B, +),后继同级组合子(U+007E, ~)。两个给定元素之间的相关关系是真则表示这两个元素匹配了这个组合子。

复杂选择器是一个序列,这个序列由组合子分割的复合选择器或伪复合选择器或者复合选择器和伪复合选择器组成。复杂选择器是作用于一组元素上的一组条件,这组条件通过组合子描述特定关系。当一个元素或伪元素匹配中了序列中最后的复合/伪复合选择器,并且序列中通过组合子分割的其他选择器单元也匹配中了各自的元素,那么就可以说这个元素匹配中了复杂选择器。

例如,.foo.bar匹配一个有"foo"和"bar"类的元素。
'.ancestor > .foo.bar’匹配这些元素的子集: 这些元素的父元素有"ancestor"类。
'.foo.bar::before’匹配一个微元素,它的源元素是.foo.bar。

简单/复合/复杂选择器列表是一个逗号分割的简单,复合,复杂选择器列表。当类型不重要或在附近的文中指定时,也被称为选择器列表,如果了下很重要并且没有被指定是,默认是复杂选择器列表。

翻译自:https://drafts.csswg.org/selectors-4/#structure

对规范的理解

复合选择器

以上规范中复合选择器比较存疑,因为规范中说的是选择器列表,但是以逗号分割的,或者空格分割的都是列表,所以这里具体说明一下复合选择器。
在规范中也说了复合选择的作用是通过一组条件选择同一个元素,并且其中不能有组合子。所以复合选择器是div.abc这种形式,并且也明确说了如果有类型选择器或者通用选择器那么只能出现在复合选择器的开头。因为像div.abc这种形式,如果将div放在.abc后面又没有组合子分割,那么其表达的含义和我们的目的显然相去甚远,.abcdiv表示的是选择一个类名为abcdiv的元素,而不是一个有abc类的div元素。

伪复合选择器

伪复合选择器,我理解是伪元素的复合选择器。复合选择器是通过元素自身属性的更加精确的描述来选择元素。而伪复合选择器则是通过伪元素自身属性更加精确的描述来选择伪元素。例如:div.abc说的是有一个div元素它还必须有abc类名。::before:hover说的是伪元素before必须被hover中才会被选中。所以复合选择器的作用都是细化自身属性来选择某个元素。

复杂选择器

和复合选择器通过细化自身属性来选择元素不同,复杂选择器是通过元素和元素之间的关系来选择元素,而关系的表述是通过组合子完成的,分别是white space用于选择后代,>用于选择子代,+用于选择下一个兄弟节点,~用于选择后继同级兄弟节点。例如:div .abc选择的是div的后代具有abc类的元素。

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

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

相关文章

【软考中级——软件设计师】备战经验 笔记总结分享

考试成绩 我第一次备考是在2022 然后那时候取消了这次是第二次 靠前我一个月复习的看了以前的笔记 然后刷了七八道历年题目学习资料推荐 :zst——2021 b站链接自荐一下我的笔记 : 软考笔记专栏 视频确实很长 , 我的建议就是先看笔记 然后不会…

OD机考真题搜集:欢乐的周末

题目 小华和小为是很要好的朋友,他们约定周末一起吃饭。通过手机交流,他们在地图上选择了多个聚餐地点(由于自然地形原因,部分聚餐地点不可达),求小为和小华都可以到达的聚餐地点有多少个? 输入 第一行输入m,n,分别代表地图的长度和宽度 第二行开始输入具体地图信息…

1-2、Java环境搭建

语雀原文链接 文章目录 1、JDK安装2、Hello World2-1、Hello World示例2-2、类名和文件名2-3、注释2-4、javadoc 3、环境变量3-1、Path作用3-2、classpath3-3、JAVA_HOME 4、Java组成5、跨平台原理5-1、Java跨平台原理5-2、C语言的跨平台原理 1、JDK安装 下载地址&#xff1a…

打造Github首页的动态飞线效果

一、导语 Github首页的地球动态飞线,大家都比较熟悉吧 二、分析 由大量随机的3点构造出贝塞尔曲线,然后开始从起点到终点的飞行后,然后再从起点到终点的消失,就此完成整个过程 三、基础代码 createCurve(startPoint, endPoint…

unity 2d 入门 飞翔小鸟 死亡闪烁特效(十三)

一、c#脚本 using System.Collections; using System.Collections.Generic; using UnityEngine;public class Bling : MonoBehaviour {public Texture img;public float speed;public static bool changeWhite false;private float alpha0f;// Start is called before the fi…

信创运维产业的发展与趋势:IT管理的新视角

随着数字化时代的来临,信息技术应用的各个方面都在发生变革。在这个过程中,信创运维产业的发展尤为引人注目。它不仅是数字化转型的关键驱动力,也是国家经济发展的重要支柱。本文将探讨信创运维产业的发展与趋势,以及国家如何管理…

芯片量产导入知识

什么是芯片量产 从芯片功能设计到生产制造、测试等环节,每一个环节都至关重要。 对于保障大规模发货后芯片指标表现的一致性,以及产品应用生命周期内的稳定性和可靠性,需要考虑多种因素。以下是一些相关的观点: 可量产性设计&am…

Stable Diffusion 系列教程 - 2 WebUI 参数详解

Stable Diffusion 的整个算法组合为: UNet VAE 文本编码器 UNet:就是我们大模型里的核心。 文本编码器:将我们的prompt进行encoder为算法能理解的内容(可以理解为SD外包出去的项目CLIP)。 VAE:对UNet生…

【牛牛送书 | 第三期】《一本书讲透Java线程:原理与实践》带你深入JAVA多线程

目录 摘要: 多线程对于Java的意义 为什么Java工程师必须掌握多线程 Java多线程使用方式 如何学好Java多线程 参与方式🥇 摘要: 互联网的每一个角落,无论是大型电商平台的秒杀活动,社交平台的实时消息推送&#x…

1.2.启动线程的五类种方法

一.new MyThread().start() 继承Thread类创建线程类 定义一个继承Thread类的子类,并重写该类的run()方法 创建Thread子类的实例,即创建了线程对象 调用该线程对象的start()方法启动线程 二.new Thread(r).start() 实现Runnable接口创建线程类 定义R…

Qt槽函数不响应不执行的一种原因:ui提升导致重名

背景: 一个包含了组件提升的ui,有个按钮的槽函数就是不响应,于是找原因。 分析: 槽函数的对应一是通过connect函数绑定信号,二是on_XXX_signal的命名方式。界面上部件的槽函数通常是第二种。 我反复确认细节&#…

写一个程序拷贝文件

使用所学文件操作,在当前目录下放一个文件data.txt,写一个程序,将data.txt文件拷贝一份,生成data_copy.txt文件。 基本思路: 打开文件data.txt,读取数据打开文件data_copy.txt,写数据从data.t…

如何使用拼多多根据ID取商品详情 API 获取热销商品信息?

使用拼多多根据ID取商品详情 API 获取热销商品信息是一种高效且便捷的方式,可以快速获取到拼多多平台上热销商品的信息。以下是获取热销商品信息的步骤和示例代码: 一、步骤 注册成为拼多多开发者,并获取API密钥。确定要获取热销商品信息的…

张正友相机标定法原理与实现

张正友相机标定法是张正友教授1998年提出的单平面棋盘格的相机标定方法。传统标定法的标定板是需要三维的,需要非常精确,这很难制作,而张正友教授提出的方法介于传统标定法和自标定法之间,但克服了传统标定法需要的高精度标定物的缺点,而仅需使用一个打印出来的棋盘格就可…

.Faust勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

引言: 数字时代的黑暗势力中,faust勒索病毒如幽灵般潜伏,将用户的数字珍宝变为数字枷锁。本文将深入介绍.faust勒索病毒的威胁特征,提供有效的数据恢复方法,并分享一系列预防措施,以协助您在数字战场上筑起…

kafka学习笔记--如何保证生产者数据可靠、不重复、有序

本文内容来自尚硅谷B站公开教学视频,仅做个人总结、学习、复习使用,任何对此文章的引用,应当说明源出处为尚硅谷,不得用于商业用途。 如有侵权、联系速删 视频教程链接:【尚硅谷】Kafka3.x教程(从入门到调优…

名字的漂亮度

给出一个字符串,该字符串仅由小写字母组成,定义这个字符串的“漂亮度”是其所有字母“漂亮度”的总和。 每个字母都有一个“漂亮度”,范围在1到26之间。没有任何两个不同字母拥有相同的“漂亮度”。字母忽略大小写。给出多个字符串&#xff0…

从零开发短视频电商 Low Level Client(推荐)连接OpenSearch进行CRUD

文章目录 依赖初始化客户端发起请求请求参数请求头设置超时时间设置线程数设置用户名密码结果解析节点选择器配置嗅探器整体示例问题参考 OpenSearch开发环境安装Docker和Docker-Compose两种方式 依赖 <dependency><groupId>org.elasticsearch.client</groupId…

【脚本】图片-音视频-压缩文件处理

音视频处理 一&#xff0c;图片操作1&#xff0c;转换图片格式2&#xff0c;多张图片合成视频 二&#xff0c;音频操作1&#xff0c;转换音频格式2&#xff0c;分割音频为多段3&#xff0c;合成多段音频 三&#xff0c;视频操作1&#xff0c;转换视频格式2&#xff0c;提取视频…

【Go自学版】01-基础

// 变量 var a, b, c 8, 2.3, "hello" var d float64; e : 6var A []int; var B [10]int; C : [10]int{1, 2, 3, 4} for i : 0; i < len(B); i {} for _, value : range C {} D make([]int, 3) // len 4, cap 10, 扩容方式 cap*2 E : make([]int, 4, 10) E …