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 ...
随机推荐
- UVA11540 Sultan's Chandelier Burnside 引理 + DP
题目传送门 https://vjudge.net/problem/UVA-11540 https://uva.onlinejudge.org/index.php?option=com_onlineju ...
- 【JVM】垃圾收集器和收集器的选择策略
前言:新生代的收集器有:Serial,ParNew,Parallel Scavenge等.老年代有:CMS,SerialOld,Paraller Old等.接下来将深入理解各个垃圾收集器的原理,以及它 ...
- iOS系统日历选择问题
参考:https://blog.csdn.net/lg_sun/article/details/78913064 -(NSString *)getTimeToken{ NSDateFormatter ...
- WCDB错误"No matching constructor for initialization of 'WCTColumnBinding'"
开始看到这个错误有点匪夷所思,完全不知道问题指向哪里, 最后用过排除法,把之前建立多个类进行了一一排除,发现有个属性是 @property(nonatomic, assign) NSInteger * ...
- 2018-2019-2 实验四 Android程序设计
实验要求 参考Android开发简易教程 完成云班课中的检查点,也可以先完成实验报告,直接提交.注意不能只有截图,要有知识点,原理,遇到的问题和解决过程等说明.实验报告中一个检查点要有多张截图. 发表 ...
- python装饰器参数那些事_接受参数的装饰器
# -*- coding: utf-8 -*- #coding=utf-8 ''' @author: tomcat @license: (C) Copyright 2017-2019, Persona ...
- Houdni学习——【三】裂开的墙砖
Houdni学习--[三]裂开的墙砖 Houdinisophoudinisop Houdni学习--[三]裂开的墙砖 一.OverView 一条从板块上裂开的纹路,并在一段距离后逐渐变细. sop 二 ...
- crontab 使用
1. 安装,结构 yum install cronie 结构: * * * * * [分钟] [小时] [每月的某一天] [每年的某一月] [每周的某一天] 2.命令 1,添加或更新crontab中的 ...
- Linux ftp安装
ftp安装部分,操作步骤如下: 可以使用yum命令直接安装ftp # yum install vsftpd ftp服务的开启与关闭命令: 开启:# /bin/systemctl start vsftp ...
- 前端模块化开发的价值(seaJs)
随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...