使用CSS的子元素选择器与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
选择子元素如果不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。
例如,如果希望选择只作为h1元素子元素的 strong 元素,可以这样写:
h1 >strong {color:red}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个h1中的 strong 不受影响:
<h1>This is <strong>very</strong><strong>very</strong>important.</h1>
<h1>This is <em>really <strong>very</strong></em>important.</h1>
扩展资料:
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。
SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。
Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像,几乎一样),因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。
参考资料来源:百度百科-SASs
Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用 变量 、 嵌套规则 、 mixins 、 导入 等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库 一同使用时。
第一步安装 Sass gem:
如果你使用的是 Windows, 就需要先 安装 Ruby 。
如果要在命令行中运行 Sass ,只要输入
你还可以命令 Sass 监视文件的改动并更新 CSS :
如果你的目录里有很多 Sass 文件,你还可以命令 Sass 监视整个目录:
使用 sass --help 可以列出完整的帮助文档。
SASS提供四个 编译风格 的选项:
生产环境当中,一般使用最后一个选项。
SASS的官方网站,提供了一个 在线转换器 。可以进行练习。
SASS允许使用变量
SassScript 还支持所有其他 CSS 属性值类型, 例如 Unicode 范围和 !important 声明。 然而,它不会对这些类型做特殊处理。 它们只会被当做不带引号的字符串看待。
编译后
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
支持数字的标准运算(加 +、减 -、乘 *、除 /和取模 %),数字也支持关系运算(<、>、<=、>=), 等式运算(==、!=)被所有数据类型支持。
编译后
所有算数运算都支持颜色值, 并且是分段运算的。 也就是说,红、绿、蓝各颜色分量会单独进行运算。 例如:
编译后
编译后
编译后
Mixins允许您定义可以在整个样式表中重新使用的样式
编译后
编译后
编译后
完整的案例: https://github.com/xiedajian/jsGrocery/blob/master/Sass%2CScss-demo/index.scss
编译后: https://github.com/xiedajian/jsGrocery/blob/master/Sass%2CScss-demo/index.css
参考:
阮一峰老师的SASS用法指南
SASS官方参考手册