stylus之选择器(Selectors)

选择器(Selectors):

缩排:

Stylus的空格有重要的意义,我们使用缩排和凹排代替花括号”{“以及”}”
这里写图片描述

上面代码就对应于
这里写图片描述

如果你喜欢,你可以把冒号加上,用做分隔,便于阅读
这里写图片描述

规则集:

Stylus就跟CSS一样,允许你使用逗号为多个选择器同时定义属性
这里写图片描述

使用新行是一样的效果
这里写图片描述

等同于
这里写图片描述

父级引用:

字符”&”会指向当前样式所在的大括号外的标签

下面这个例子,我们两个选择器(textarea和input)在:hover伪类选择器上都改变了color值
这里写图片描述

等同于
这里写图片描述

这里写图片描述
等价于
这里写图片描述

下面这个例子,IE浏览器利用了父级引用以及混合书写来实现2px的边框
这里写图片描述

其变身后面目
这里写图片描述

“&”符号会找到”box-shadow”的作用对象,也就是”#login”,给它添加”border”的样式

消除歧义:

类似padding - n的表达式可能既被解释成减法运算,也可能被释义成一元负号属性。为了避免这种歧义,用括号包裹表达式
这里写图片描述

编译为
这里写图片描述

然而,只有在函数中才会这样(因为函数同时用返回值扮演混合或回调)。
例如,下面这个就是OK的(产生与上面相同的结果)
这里写图片描述

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

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

相关文章

正则仅输入文字字母空格,但必须含有字母

/^(?!\d$)[\s\da-zA-Z]$/ 意为正则仅输入文字字母空格,但必须含有字母 (?!\d$) 正方向上查找“非至少一个数字结尾”处才开始匹配,且返回空。(为什么是空,(?!\d$)前什么也没有写,等于即使满足正则的条件也不会得到任…

委托模型和事件模型 [C#]

1. 多播委托与委托有关的语法&#xff1a; 定义委托&#xff1a;<modifiers> delegate <return_type> <delegate_name> (<argument_list>)public delegate void Message() ;创建委托实例&#xff1a;<delegate_type> <name> new <d…

javascript学习系列(3):数组中的foreach方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…

根据IP地址查询其所属城市

提供查询接口的网站收藏&#xff1a; 新浪的IP地址查询接口&#xff1a;http://int.dpool.sina.com.cn/iplookup/iplookup.php?formatjs新浪多地域测试方法&#xff1a;http://int.dpool.sina.com.cn/iplookup/iplookup.php?formatjs&ip218.192.3.42搜狐IP地址查询接口&…

stylus之变量(Variables)

变量(Variables)&#xff1a; 变量&#xff1a; 我们可以指定表达式为变量&#xff0c;然后在我们的样式中贯穿使用 编译为 变量甚至可以组成一个表达式列表 标识符&#xff08;变量名&#xff0c;函数等&#xff09;&#xff0c;也可能包括$字符 属性查找&#…

如何建立双机热备系统

如何建立双机热备系统&#xff1c;上一帖 | 下一帖&#xff1e; 笔者是一名医院的网管&#xff0c;而医院的软件系统要求能够做到一周724小时工作&#xff0c;对于整个系统的核心服务器来说如果死机后果是灾难性的。所以采用网络服务器容错技术来保障计算机系统的可靠性是件大事…

你还不会ant design中的拖拽table实现吗

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 微信公众号关注小歌谣 前言 首先刚开始知道要书写一个这样的功能我的内心是比…

vue事件委托传递节点防止向下传递穿透

例如&#xff1a; <li click"popSelect($event)"><span>Bank Country</span><input type"text" placeholder"Select bank country" v-model"model.bank_country" name"bank_country" readonly />&…

gcc -fPIC选项

使用 -fPIC 选项&#xff0c;会生成 PIC 代码。.so 要求为 PIC&#xff0c;以达到动态链接的目的&#xff0c;否则&#xff0c;无法实现动态链接。non-PIC 与 PIC 代码的区别主要在于 access global data, jump label 的不同。比如一条 access global data 的指令&#xff0c;n…

Sharepoint的文档库用资源管理器方式浏览报错“Explorer View ”解决方案。

最近在安装Wss3.0时候&#xff0c;在拷贝已存在资料到客户电脑上时&#xff0c;打开客户的文档库的资源管理器的时候&#xff0c;提示Explorer view 错误&#xff0c;而且客户端访问的时候也报错。 在经过N多的查询和搜索之后终于找到的了解决方法。原来如此http://207.46.19.1…

stylus之插值(Interpolation)

插值(Interpolation)&#xff1a; 插值&#xff1a; Stylus支持通过使用{}字符包围表达式来插入值&#xff0c;其会变成标识符的一部分。例如&#xff0c;-webkit-{‘border’ ‘-radius’}等同于-webkit-border-radius 比较好的例子就是私有前缀属性扩展 变身 选择器…

iOS 两个tableview的 瀑布流

iOS 两个tableview的 瀑布流1. [代码]Objective-C //// DocViewController.m// getrightbutton//// Created by 隋文涛 on 12-12-9.// Copyright (c) 2012年 隋文涛. All rights reserved.//#import "DocViewController.h"#define heightofimage(image) imag…

javascript学习系列(4):数组中的some方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说s…

Oracle工具使用(export,import,sqlldr中文帮助及实例))

1.1 EXPORT 1.1.1 帮助 exp是Oracle的一个可执行程序&#xff0c;存放目录$ORACLE_HOME/bin exp导出工具将数据库中数据备份压缩成一个二进制系统文件.可以在不同OS间迁移 它有三种模式&#xff1a; 用户模式&#xff1a;导出用户所有对象以及对象中的数据&#xff1b; 表…

stylus之运算符(Operators)

运算符(Operators): 运算符优先级: 下表运算符优先级&#xff0c;从最高到最低 一元运算符: 以下一元运算符可用”!”,”not”,”-“,””以及”~” 逻辑运算符not的优先级较低&#xff0c;因此&#xff0c;下面这个例子可以替换 用 二元运算符: 下标运算符[]允…

触发器-MSSQL常用操作

这里只打算讲解四部分了&#xff0c;也就最简单、最常用的四部分。1、触发器。定义&#xff1a; 何为触发器&#xff1f;在SQL Server里面也就是对某一个表的一定的操作&#xff0c;触发某种条件&#xff0c;从而执行的一段程序。触发器是一个特殊的存储过程。常见的触发器有三…

Android环境的安装遇到的问题

其实开始做Android&#xff0c;根本没有想过自己会在安装Android环境方面遇到什么问题。可是谁有知道呢&#xff1f;其实很多人都会遇到这些安装问题。 下载一个JDK,大家都是知道的&#xff0c;Android嘛&#xff0c;基本语言是java&#xff0c;所以&#xff0c;要搭建一个java…

javascript学习系列(5):数组中的reduce方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…

oracle数据导入sqlldr小例子

表结构&#xff1a;emp Sql代码 create table EMP ( empno NUMBER(4) not null, ename VARCHAR2(10), job VARCHAR2(9), mgr NUMBER(4), hiredate DATE, sal NUMBER(7,2), comm NUMBER(7,2), deptno NUMBER(2) …

stylus之混合书写(Mixins)

混合书写(Mixins) Mixins&#xff1a;Mixins是预处器中的函数。平时你在写样式时某段CSS样式要经常重复性的用到多个元素中&#xff0c;这样你就需要重复的写多次。在CSS预处器中&#xff0c;你可以为这些公用的CSS样式定义一个Mixin&#xff0c;然后在你CSS需要使用这些样式的…