CSS选择器的新用法
2018-06-24 02:15:02来源:未知 阅读 ()
前面的话
现在,预处理器(如sass)似乎已经成为开发CSS的标配,正如几年前jQuery是开发JS的标配一样。JS的querySelector借鉴了jQuery的选择器思想,CSS选择器也借鉴了预处理器的变量定义、选择器嵌套、代码块重用等常用功能。本文将详细介绍CSS选择器的新用法
变量
一般地,我们在进行web开发时,会有一套变量定义规范,以sass为例,如下所示
// 颜色定义规范 $color-background : #222 $color-background-d : rgba(0, 0, 0, 0.3) $color-highlight-background : #333 //字体定义规范 $font-size-small : 12px $font-size-medium : 14px $font-size-large : 18px
而CSS变量的语法如下
【声明变量】
变量必须以--
开头。例如--example-variable: 20px,意思是将20px赋值给--example-varibale变量
可以将声明变量的语句置于任何元素内,如果要设置全局变量,则可以设置为:root、body或html
:root{--bgColor:#000;}
变量声明就像普通的样式声明语句一样,也可以使用内联样式
<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: 0; } h1, h2, h3, h4, h5, h6{ margin: 0; }
上面两段代码的效果相同
选择器嵌套
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语法
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:border使用
下一篇:Demo—标题左右两侧的对等横线
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash