前面的话
现在，预处理器(如sass)似乎已经成为开发CSS的标配，正如几年前jQuery是开发JS的标配一样。JS的querySelector借鉴了jQuery的选择器思想，CSS选择器也借鉴了预处理器的变量定义、选择器嵌套、代码块重用等常用功能。本文将详细介绍CSS选择器的新用法
变量
一般地，我们在进行web开发时，会有一套变量定义规范，以sass为例，如下所示
// 颜色定义规范
$color-background : #
$color-background-d : rgba(, , , 0.3)
$color-highlight-background : # //字体定义规范
$font-size-small : 12px
$font-size-medium : 14px
$font-size-large : 18px
而CSS变量的语法如下
【声明变量】
变量必须以--开头。例如--example-variable: 20px，意思是将20px赋值给--example-varibale变量
可以将声明变量的语句置于任何元素内，如果要设置全局变量，则可以设置为:root、body或html
:root{--bgColor:#;}
变量声明就像普通的样式声明语句一样，也可以使用内联样式
<body style="--bgColor:#000">
【使用变量】
使用var()函数使用变量，并且可以被使用在任意的地方。例如：var(--example-variable)会返回--example-variable所对应的值
<body style="--bgColor:#000;">
<div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div>
</body>
var()函数还有一个可选参数，用来设置默认值，当变量无法取得值时，则使用默认值
<div style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></div>
[注意]关于CSS变量的详细用法移步至此
@apply
介绍@apply之前，先介绍一下sass中的混合宏@mixin，指可以重用的代码块
比如，常见的文字溢出隐藏重用
@mixin overflow-ellipsis{
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
};
div {
@include overflow-ellipsis;
}
而应用规则集@apply也是实现类似的功能。与var()相比，@apply是引用样式的集合，而var()是引用一个单独的样式值
:root{
--overflow-ellipsis:{
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
};
}
.title{
width:200px;
@apply --overflow-ellipsis;
}
自定义选择器
自定义选择器通过@custom-selector来定义，后面跟随一个:--接着是自定义选择器的名称，后面是需要定义的选择器，多个用逗号隔开
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
这样，:--heading就成为一个可以使用的选择器
:--heading{
margin: ;
}
h1, h2, h3, h4, h5, h6｛
margin: ;
｝
上面两段代码的效果相同
选择器嵌套
CSS规则包含许多重复的内容
table.colortable td {
text-align:center;
}
table.colortable td.c {
text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
border:1px solid black;
}
table.colortable th {
text-align:center;
background:black;
color:white;
}
使用嵌套语法后，代码如下
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}
当使用嵌套样式规则时，必须能够引用由父规则匹配的元素; 毕竟是整个嵌套点。为了达到这个目的，这个规范定义了一个新的选择器，即嵌套选择器，写成ASCII符号＆
当在嵌套样式规则的选择器中使用时，嵌套选择器表示由父规则匹配的元素。在任何其他情况下使用时，它什么都不代表。（也就是说，它是有效的，但不匹配任何元素）
[注意]&嵌套选择符的两种错误写法如下所示
.foo {
color: red;
.bar & { color:blue; }
}
.foo {
color: red;
&.bar, .baz { color: blue; }
}
【@nest】
为了解决上面的嵌套选择符&的脆弱，可以使用@nest选择符，@nest可适用范围更广，只要与嵌套选择符&共同作用即可
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
//等价于
.foo { color: red; }
.foo > .bar { color: blue; }
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
//等价于
.foo { color: red; }
.parent .foo { color: blue; }
.foo {
color: red;
@nest :not(&) {
color: blue;
}
}
//等价于
.foo { color: red; }
:not(.foo) { color: blue; }
[注意]@nest选择符的两种错误写法如下所示
.foo {
color: red;
@nest .bar {
color: blue;
}
}
.foo {
color: red;
@nest & .bar, .baz {
color: blue;
}
}
最后
遗憾地是，除了CSS变量variable可以在新版本chrome下使用外，其他CSS选择器的新用法目前都没有浏览器支持。但是，CSS后处理器postcss中的cssnext插件可以解决所有问题
就像cssnext官网说的一样，今天就开始使用明天的CSS语法
CSS选择器的新用法的更多相关文章
-
牢记 31 种 CSS 选择器用法
原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2011 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...
-
简易数据分析 15 | Web Scraper 高级用法——CSS 选择器的使用
这是简易数据分析系列的第 15 篇文章. 年末事情比较忙,很久不更新了,后台一直有读者催更,我看了一些读者给我的私信,发现一些通用的问题,所以单独写篇文章,介绍一些 Web Scraper 的进阶用法 ...
-
HTML5新标签使用及CSS选择器(伪类)
这些标签能够让搜索引擎更直接的解析页面内容. <header></header>语义:文档或者页面的头部 <nav></nav>语义:导航这两者不是组合 ...
-
css选择器用法，使用css定位元素，css和xpath元素定位的区别
css定位元素 1.什么是css? CSS(Cascading Style Sheets)层叠样式表,是一种语言,用来描述html或者xml的显示样式.在css语言中有css选择器,在selenium ...
-
这 30 类 CSS 选择器，你必须理解！
CSS 选择器是一种模式,用于选择需要添加样式的元素.平时使用最多也是最简单的就是 #id..class 和标签选择器,在 CSS 中还有很多更加强大更加灵活的选择方式,尤其是在 CSS3 中,增加了 ...
-
css的定义、用法、注释、命名规则、书写规范
什么是css: css全名是层叠样式表(Cascading Style Sheets) CSS的作用:给html标签添加"样式",样式定义了如何显示 HTML 元素 标签是可以由自 ...
-
{前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
-
你知道吗？31种 CSS 选择器的应用
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的.用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...
-
css选择器３０种
CSS 选择器是一种模式,用于选择需要添加样式的元素.平时使用最多也是最简单的就是 #id..class 和标签选择器,在 CSS 中还有很多更加强大更加灵活的选择方式,尤其是在 CSS3 中,增加了 ...
随机推荐
-
很不错的在线Office控件：IWebOffice与SOAOffice
http://blog.csdn.net/cjh200102/article/details/17220441 iWebOffice2003文档控件 iWebOffice2003网络文档中间件能够在I ...
-
江湖救急：webbrowser中js文件丢失问题~
页面中,有一个按钮,点击按钮通过js create 了一个 script标签 ,链接加载一个外部js文件,执行该js文件 $("#a").click(function(){ $.g ...
-
C++中的冒泡排序,选择排序,插入排序
最简单的插入排序:思想,两两之间比较,时间复杂度o(n^2) void bubblesort(vector<int>&vec, int n) { if (&vec==NUL ...
-
POJ 2255 Tree Recovery(根据前序遍历和中序遍历，输出后序遍历)
题意:给出一颗二叉树的前序遍历和中序遍历的序列,让你输出后序遍历的序列. 思路:见代码,采用递归. #include <iostream> #include <stdio.h> ...
-
【Hadoop学习】HDFS 短路本地读
Hadoop版本:2.6.0 本文系从官方文档翻译而来,转载请尊重译者的工作,注明以下链接: http://www.cnblogs.com/zhangningbo/p/4146296.html 背景 ...
-
NodeJS 从0开始
查看Node 基本配置$ npm config ls -l $npm help install将展开install的help文档 初始化目录 npm init 根据提示完成 将生成package.js ...
-
day05（数字类型，字符串类型，列表类型）
一,复习: 1.顺序结构.分支结构.循环结构 2.if分支结构 if 条件: 代码块 elif 条件: 代码块 else: 代码块 # 可以被if转换为False:0 | '' | None | [] ...
-
vs2008 点击";转到定义";为什么是";未定义符号";
1.有可能是VA未安装正确,但是我遇到的情况是我的VA安装正确的. 2.我的解决办法:删掉工程的.ncb文件后重新编译即可:以前也遇到过断点打不上去的事情,也是删掉.ncb后重新编译就可以了. 附带一 ...
-
BZOJ2038 [2009国家集训队]小Z的袜子 莫队+分块
作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命…… 具体来说,小Z把这N只袜子从1到N编号,然后从 ...
-
Kafka：ZK+Kafka+Spark Streaming集群环境搭建（十四）定义一个avro schema使用comsumer发送avro字符流，producer接受avro字符流并解析
参考<在Kafka中使用Avro编码消息:Consumer篇>.<在Kafka中使用Avro编码消息:Producter篇> 在了解如何avro发送到kafka,再从kafka ...