Sass--伪类嵌套
其实伪类嵌套和属性嵌套非常类似,只不过他需要借助`&`符号一起配合使用。
a {
&:link,
&:visited {
color: blue;
}
&:hover {
color: orange;
}
&:active {
color: red
}
}
编译出来的 CSS:
a:link, a:visited {
color: blue;
}
a:hover {
color: orange;
}
a:active {
color: red;
}
避免选择器嵌套:
- 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
- 选择器越具体则声明语句越冗长,而且对最近选择器的引用(&)也越频繁。在某些时候,出现混淆选择器路径和探索下一级选择器的错误率很高,这非常不值得。
为了防止此类情况,我们应该尽可能避免选择器嵌套。然而,显然只有少数情况适应这一措施。
Sass--伪类嵌套的更多相关文章
- Sass变量、嵌套
声明变量定义变量的语法Sass 的变量包括三个部分: 声明变量的符号“$” 变量名称 赋予变量的值简单的示例,假设你的按钮颜色可以给其声明几个变量: $brand-primary : darken(# ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
- 前端知识之CSS(1)-css语法、css选择器(属性、伪类、伪元素、分组与嵌套)、css组合器
目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...
- 2.sass变量、嵌套、混合(mixin)、继承拓展、@import、comment
变量.嵌套.混合(mixin).继承拓展.@import.comment 变量的意义 在sass里我们可以定义多个变量来存放颜色.边框等等的样式,这样就可以在下面想要使用样式的时候使用变量了 这样的优 ...
- 如何使用CSS伪类选择器
总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)
本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- css 为元素选择器,css目标状态伪类,结构化选择器,多媒体选择器,清除表默认样式、属性选择器
伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...
随机推荐
- 计蒜客NOIP模拟D1T2
原题: 蒜头君有一棵有根树,树的每一边都有边权,蒜头君想知道任意两点间最短距离之和为多少.另外,由于各种原因,蒜头君的树的边的边权会发生若干次改变,蒜头君想让你告诉他,每一次改变后,任意两点间最短距离 ...
- Python 语音识别
调用科大讯飞语音听写,使用Python实现语音识别,将实时语音转换为文字. 参考这篇博客实现的录音,首先在官网下载了关于语音听写的SDK,然后在文件夹内新建了两个.py文件,分别是get_audio. ...
- controllerpom
<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...
- 1,MySQL常用函数
一,MySQL聚合函数 1,AVG()函数 AVG()函数是一个聚合函数,它用于计算一组值或表达式的平均值. AVG()函数的语法如下: AVG(DISTINCT expression) 例如有如下p ...
- php strtolower()函数 语法
php strtolower()函数 语法 作用:把所有字符转换为小写.大理石量具 语法:strtolower(string) 参数: 参数 描述 string 必须,规定要转换的字符串 说明:str ...
- JS谷歌浏览器断点调试
1.找到对应的文件 按F12打开网页调试工具,默认打开的是Elements,显示的是网页标签元素.选择Source,在左侧找到对应的js代码文件(这里是在page标签上找到的) 1.1.如何找到web ...
- 【LeetCode 57】插入区间
题目链接 [题解] 这题要分四种情况. 第一种.区间在所有区间的前面. 第二种.区间在所有区间的后面. 第三种.区间在某两个区间之间但是没有交集. 第四种.区间和某个区间产生了相交. 对于第四种枚举第 ...
- 【HDOJ6578】Blank(DP)
题意:一个长为n的序列,每个位置上的值是0,1,2,3中的一个,有m个限制条件,限制位置[l[i],r[i]]中不同的数值有x[i]个,问方案数MOD 998244353 n<=100,m< ...
- spring声明式的事务管理
spring支持声明式事务管理和编程式事务管理两种方式. 编程式事务使用TransactionTemplate来定义,可在代码级别对事务进行定义. 声明式事务基于aop来实现,缺点是其最细粒度的事务声 ...
- python生成接口自动化测试报告模版
1:准备html模版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...