【SASS/SCSS(一)】选择器
Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式。
而SCSS是SASS引入的语法,是CSS的超集,所以所有CSS有效的使用在SCSS中都生效
一、回顾CSS选择器
- 通用选择器 *
- 元素选择器
- 类选择器,.className
- ID选择器,#id
- 属性选择器,对元素中某个属性的值进行筛选,语法有:
[attr][attr=value][attr~=value][attr|=value][attr^=value][attr$=value][attr*=value] - 逗号分隔的选择器列表
- 空格代表的后代选择器
- > 代表的直接后代选择器
- ~ 代表所有后面的兄弟节点选择器
- + 代表后面直接跟着的第一个兄弟节点选择器
- || 列组合器,例如 col || td代表<col>该列域下的所有td结点
- 伪类/伪元素选择器
具体参见MDN文档:
CSS 选择器 - CSS:层叠样式表 | MDN (mozilla.org)
二、SCSS利用嵌套语法实现选择器
SCSS为了优化CSS的语法表达,使其更简洁、避免重复定义样式,因此实现了嵌套语法来对元素进行选择。例如:
//对ul中的直接后代进行筛选,定制了直接后代中li的样式
ul > {li {list-style-type: none;}
}//h2选择紧邻兄弟p元素
h2 {+ p {border-top: 1px solid gray;}
}//p元素的所有一般兄弟元素中,选择出span / h1定制样式
p {~ {span {opacity: 0.8;},h1 {color: red;}}
}
由于嵌套语法,父选择器的很多属性可以不被反复定义,同时使得选择器的实现更直观、更灵活
三、父选择器
Sass中利用 & 来指示父选择器,这样在嵌套语法中,可以更方便地复用父选择器
同时,还可以在父选择器的基础上添加后缀,更便捷地寻找基于父选择器的命名【但并非父子关系】
添加后缀时,父选择器必须是字母/数字结尾的(例如以 ID 、className、元素标签定义的父类),才可以添加后缀
.alert {max-width: 600px;margin: 4rem auto;width: 90%;font-family: "Raleway", sans-serif;background: #f4f4f4;//定义该元素伪类的CSS&:hover {font-weight: bold;}//添加后缀&__copy {display: none;padding: 1rem 1.5rem 2rem 1.5rem;color: gray;line-height: 1.6;font-size: 14px;font-weight: 500;&--open {display: block;}}}
嵌套语法需要区分的部分!构成父子关系的选择器 以及 只是复用名称的选择器!
//SASS
.btn {color: red;//后代选择器a{color:white;}//复用的时候要自己再构造一遍需要的后代选择器& &-item{color:purple;}//平级,只是名称做了复用&-item {color: black;&-green {color: green}}
}//等价CSS
.btn {color: red;
}.btn a {color: white;
}.btn .btn-item {color: purple;
}.btn-item {color: black;
}.btn-item-green {color: green;
}
如果基于选择器列表,& 获取父选择器代表什么呢?
&可以理解为所有父级选择器结构的引用,举几个例子,看看SASS该写法下css的等价内容:
1、
//scss
.main aside:hover,
.sidebar p {parent-selector: &;// => ((unquote(".main") unquote("aside:hover")),// (unquote(".sidebar") unquote("p")))
}//等价css
.main aside:hover,
.sidebar p {parent-selector: .main aside:hover, .sidebar p;
}
2、
//scss
ul, ol {text-align: left;& & {padding: {bottom: 0;left: 0;}}
}//css
ul, ol {text-align: left;
}
ul ul, ol ol {padding-bottom: 0;padding-left: 0;
}
在这个例子中值得注意的是,有相同前缀的css属性例如padding-*、margin-*等,可以在书写时以嵌套语法的形式拆分
3、如果父选择器是类选择器,可以利用其构造新的选择器,并提取到顶层
//scss
.selector {color: blue;//利用表达式的写法构造@at-root #{a + &} {color: red;}
}//等价css
.selector {color: blue;
}
a.selector {color: red;
}
相关文章:
【SASS/SCSS(一)】选择器
Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式。 而SCSS是SASS引入的语法,是CSS的超集,所以所有CSS有效的使用在SCSS中都生效 一、回顾CSS选择器 通用选择器 *元素选择器类选择器,.classNameID选择器&am…...
详细解析Kafaka Streams中各个DSL操作符的用法
什么是DSL? 在Kafka Streams中,DSL(Domain Specific Language)指的是一组专门用于处理Kafka中数据流的高级抽象和操作符。这些操作符以声明性的方式定义了数据流的转换、聚合、连接等处理逻辑,使得开发者可以更加专注…...
C++中链表的底层迭代器实现
大家都知道在C的学习中迭代器是必不可少的,今天我们学习的是C中的链表的底层迭代器的实现,首先我们应该先知道链表的底层迭代器和顺序表的底层迭代器在实现上有什么区别,为什么顺序表的底层迭代器更加容易实现,而链表的底层迭代器…...
3.5、matlab打开显示保存点云文件(.ply/.pcd)以及经典点云模型数据
1、点云数据简介 点云数据是三维空间中由大量二维点坐标组成的数据集合。每个点代表空间中的一个坐标点,可以包含有关该点的颜色、法向量、强度值等额外信息。点云数据可以通过激光扫描、结构光扫描、摄像机捕捉等方式获取,广泛应用于计算机视觉、机器人…...
Qt-事件与信号
事件和信号的区别在于,事件通常是由窗口系统或应用程序产生的,信号则是Qt定义或用户自定义的。Qt为界面组件定义的信号往往通常是对事件的封装,如QPushButton的clicked()信号可以看做对QEvent::MouseButtonRelease类事件的封装。 在使用界面组…...
数据结构 day3
目录 思维导图: 学习内容: 1. 顺序表 1.1 概念 1.2 有关顺序表的操作 1.2.1 创建顺序表 1.2.2 顺序表判空和判断满 1.2.3 向顺序表中添加元素 1.2.4 遍历顺序表 1.2.5 顺序表按位置进行插入元素 1.2.6 顺序表任意位置删除元素 1.2.7 按值进…...
Kubernetes面试整理-如何进行滚动更新和回滚?
在 Kubernetes 中,滚动更新和回滚是管理应用程序版本的常用操作。滚动更新允许您逐步替换现有的 Pod 实例,以便在不中断服务的情况下部署新版本。回滚则是在新版本出现问题时恢复到之前的版本。 滚动更新 通过 Deployment 进行滚动更新 1. 创建一个 Deployment: 下面是一个…...
flutter ios打包 xcode报错module ‘xxx‘ not found
flutter ios打包 xcode报错module ‘xxx’ not found 如果已经在androidstudio中成功运行了flutter build ios --release。 那么可能是你使用xcode打开的是ios/Runner.xcodeproj文件。 你关掉xcode,重新打开ios/Runner.xcworkspace/文件。然后重新archiveÿ…...
LLM 构建Data Multi-Agents 赋能数据分析平台的实践之④:数据分析之三(数据展示)
概述 在先前探讨的文章中,我们构建了一个全面的数据测试体系,该体系遵循“数据获取—数据治理—数据分析”的流程。如何高效地构建数据可视化看板,以直观展现分析结果,正逐渐成为利用新兴技术提升效能的关键领域。伴随业务拓展、数…...
Elasticsearch 批量更新
Elasticsearch 批量更新 准备条件查询数据批量更新 准备条件 以下查询操作都基于索引crm_flow_info来操作,索引已经建过了,本文主要讲Elasticsearch批量更新指定字段语句,下面开始写更新语句执行更新啦! 查询数据 查询指定shif…...
【Pytorch笔记】张量
torch.Tensor() 是 PyTorch 库中用于创建张量的一个函数。在 PyTorch 中,张量是多维数组,它们可以存储在 CPU 或 GPU 上,并且支持自动求导,这使得它们非常适合进行深度学习和科学计算。 张量可以在Python list形式下通过 torch.T…...
查找json中指定节点的值,替换为指定的值
有时我们封装好的实体转化成的json字段的值和第三方要求的不一样,比如我们字段的值是字符串,我们需要使用int类型的值,就需要将这个键的值转化成int类型。 比如将以下 convulsionNumber字段中字符串的值“一次”替换为0 {"convulsionT…...
Android 14 开机时间优化措施
Android开机优化系列文档-CSDN博客 Android 14 开机时间优化措施汇总-CSDN博客Android 14 开机时间优化措施-CSDN博客根据systrace报告优化系统时需要关注的指标和优化策略-CSDN博客Android系统上常见的性能优化工具-CSDN博客Android上如何使用perfetto分析systrace-CSDN博客A…...
【QGroundControl二次开发】二.使用QT编译QGC(Windows)
【QGroundControl二次开发】一.开发环境准备(Windows) 二. 使用QT编译QGC(Windows) 2.1 打开QT Creator,选择打开项目,打开之前下载的QGC项目源码。 编译器选择Desktop Qt 6.6.3 MSVC2019 64bit。 点击运…...
[C/C++入门][变量和运算]4、带余除法
给定被除数和除数,求整数商及余数 看到这个题,我们都知道C的除法运算符 /,默认是不带余数的。那现在要求带余数,需要能够想到% %,是C获取余数的方法:比如5/22; 5%21;%得到的是除后的余数。 #inc…...
常用优秀内网穿透工具(实测详细版)
文章目录 1、前言2、安装Nginx3、配置Nginx4、启动Nginx服务4.1、配置登录页面 5、内网穿透5.1、cpolar5.1.1、cpolar软件安装5.1.2、cpolar穿透 5.2、Ngrok5.2.1、Ngrok安装5.2.2、随机域名5.2.3、固定域名5.2.4、前后端服务端口 5.3、NatApp5.4、Frp5.4.1、下载Frp5.4.2、暴露…...
防火墙NAT地址转换和智能选举综合实验
一、实验拓扑 目录 一、实验拓扑 二、实验要求(接上一个实验要求后) 三、实验步骤 3.1办公区设备可以通过电信链路和移动链路上网(多对多的NAT,并且需要保留一个公网IP不能用来转换) 3.2分公司设备可以通过总公司的移动链路和电信链路访…...
Android获取当前屏幕显示的是哪个activity
在 Android 中,要获取当前屏幕显示的 Activity,可以使用以下几种方法: 方法一:使用 ActivityManager 获取当前运行的任务信息 这是一个常见的方法,尽管从 Android 5.0 (API 21) 开始,有些方法变得不太可靠…...
JVM:自动垃圾回收
文章目录 一、C/C的内存管理二、Java的内存管理1、方法去的回收2、堆回收(1)引用计数法和可达性分析法(2)五种对象引用(3)垃圾回收算法 一、C/C的内存管理 在C和C没有自动垃圾回收机制,一个对象…...
【填坑指南】PHP8报:Unable to load dynamic library ‘zip.so’ 错误
1.原因分析 这种情况多数发生在PHP安装时因为各种原因失败后,残余的库与最后安装的PHP版本不兼容导致的。 2.我的路径 一开始我按照以前摸索出来的安装PHP7.3的成功经验来编译方法安装PHP8.3,发现以前的套路已经失效了。反复重装PHP8.3失败后…...
观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序(Program) 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序,比如我们使用QQ,就启动了一个进程,操作系统就会为该进程分配内存…...
