登录  /  注册
首页 > web前端 > css教程 > 正文

CSS选择器的新用法详解

小云云
发布: 2018-02-05 10:18:42
原创
1616人浏览过

现在,预处理器(如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;">
    <p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p>    
</body>
登录后复制

  var()函数还有一个可选参数,用来设置默认值,当变量无法取得值时,则使用默认值


<p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p>
登录后复制

  [注意]关于CSS变量的详细用法移步至此

@apply

  介绍@apply之前,先介绍一下sass中的混合宏@mixin,指可以重用的代码块

  比如,常见的文字溢出隐藏重用


@mixin overflow-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
p {
    @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语法

相关推荐:

CSS选择器字段解析的实现方法

详解CSS选择器 Selector

CSS选择器中带点(.)的解决办法

以上就是CSS选择器的新用法详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号