其实伪类嵌套和属性嵌套非常类似,只不过他需要借助`&`符号一起配合使用。

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--伪类嵌套的更多相关文章

  1. Sass变量、嵌套

    声明变量定义变量的语法Sass 的变量包括三个部分: 声明变量的符号“$” 变量名称 赋予变量的值简单的示例,假设你的按钮颜色可以给其声明几个变量: $brand-primary : darken(# ...

  2. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  3. 前端知识之CSS(1)-css语法、css选择器(属性、伪类、伪元素、分组与嵌套)、css组合器

    目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...

  4. 2.sass变量、嵌套、混合(mixin)、继承拓展、@import、comment

    变量.嵌套.混合(mixin).继承拓展.@import.comment 变量的意义 在sass里我们可以定义多个变量来存放颜色.边框等等的样式,这样就可以在下面想要使用样式的时候使用变量了 这样的优 ...

  5. 如何使用CSS伪类选择器

    总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...

  6. CSS3 nth 伪类选择器

    考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...

  7. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

  8. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  9. css 为元素选择器,css目标状态伪类,结构化选择器,多媒体选择器,清除表默认样式、属性选择器

    伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...

随机推荐

  1. vscode舒适的字体风格

    首选项-->设置-->输入setting.json-->查找到设置文件 添加如下配置 "editor.tabSize": 2, "files.assoc ...

  2. 牛客网NOIP赛前集训营-提高组(第七场)A-中国式家长 2

    题目描述 有一天,牛牛找到了一个叫<中国式家长>的游戏,游戏中需要靠"挖脑洞"来提升悟性. 挖脑洞在一个\(N\)行\(M\)列的地图上进行,一开始牛牛有\(K\)点行 ...

  3. LINUX Mysql5.6.19 安装

    1.需要扩展安装 yum -y install make bison gcc-c++ cmake ncurses ncurses-devel 2.下载Mysql5.6.19 wget ftp://mi ...

  4. 【UNR #2】黎明前的巧克力 解题报告

    [UNR #2]黎明前的巧克力 首先可以发现,等价于求 xor 和为 \(0\) 的集合个数,每个集合的划分方案数为 \(2^{|S|}\) ,其中 \(|S|\) 为集合的大小 然后可以得到一个朴素 ...

  5. 10.18.2 linux文件压缩与打包

    tar压缩工具 tar 本身为一个打包工具,可以把目录打包成一个文件,它的好处是它把所有文件整合成一个大文件整体,方便拷贝或者移动. 语法:tar [-zjxcvfpP] filename tar 命 ...

  6. 查看SQL Server被锁的表以及如何解锁【转】

    锁定数据库的一个表的区别  SELECT * FROM table WITH (HOLDLOCK) 其他事务可以读取表,但不能更新删除  SELECT * FROM table WITH (TABLO ...

  7. [CSP-S模拟测试]:w(树上DP)

    题目背景 $\frac{1}{4}$遇到了一道水题,双完全不会做,于是去请教小$D$.小$D$看了${0.607}^2$眼就切掉了这题,嘲讽了$\frac{1}{4}$一番就离开了.于是,$\frac ...

  8. [CSP-S模拟测试]:reverse(模拟)

    题目传送门(内部题56) 输入格式 第一行包含一个整数:$T$,表示数据组数.接下来$T$行,每行包含两个字符串:$a\ b$. 输出格式 对于每组数据,如果存在$c$,输出最长的情况下字典序最大的$ ...

  9. [CSP-S模拟测试]:math(裴蜀定理)

    题目传送门(内部题22) 输入格式 第一行有$2$个整数$n,k$.第二行有$n$个正整数$a_i$. 输出格式 第一行有一个整数$s$,表示可以生成的非负整数的个数.第二行有$s$个可以生成的非负整 ...

  10. 建站手册-浏览器信息:Mozilla Firefox 浏览器

    ylbtech-建站手册-浏览器信息:Mozilla Firefox 浏览器 1.返回顶部 1. http://www.w3school.com.cn/browsers/browsers_firefo ...