原码笔记

原码笔记

CSS选择器的新用法(推荐)

小诸哥 0

本文将详细介绍CSS选择器的新用法,感兴趣的朋友一起学习吧

前面的话

  现在,预处理器(如sass)似乎已经成为开发css的标配,正如几年前jquery是开发js的标配一样。JS的querySelector借鉴了jQuery的选择器思想,CSS选择器也借鉴了预处理器的变量定义、选择器嵌套、代码块重用等常用功能。本文将详细介绍CSS选择器的新用法

变量

  一般地,我们在进行web开发时,会有一套变量定义规范,以sass为例,如下所示

  1. // 颜色定义规范
  2. $color-background : #222
  3. $color-background-: rgba(0, 0, 0, 0.3)
  4. $color-highlight-background : #333
  5. //字体定义规范
  6. $font-size-small : 12px
  7. $font-size-medium : 14px
  8. $font-size-large : 18px
  9.  

  而CSS变量的语法如下

【声明变量】

  变量必须以--开头。例如--example-variable: 20px,意思是将20px赋值给--example-varibale变量

  可以将声明变量的语句置于任何元素内,如果要设置全局变量,则可以设置为:root、body或html

  1. :root{--bgColor:#000;}

  变量声明就像普通的样式声明语句一样,也可以使用内联样式

  1. <body style="--bgColor:#000">

【使用变量】

  使用var()函数使用变量,并且可以被使用在任意的地方。例如:var(--example-variable)会返回--example-variable所对应的值

  1. <body style="--bgColor:#000;&quot;>
  2.      <div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div>
  3. </body>

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

  1. <div style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></div>

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

@apply

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

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

  1. @mixin overflow-ellipsis{
  2.      overflow:hidden;
  3.      text-overflow: ellipsis;
  4.      white-space: nowrap;
  5.      };
  6. div {
  7.      @include overflow-ellipsis;
  8. }  

  而应用规则集@apply也是实现类似的功能。与var()相比,@apply是引用样式的集合,而var()是引用一个单独的样式值

  1. :root{
  2.      --overflow-ellipsis:{
  3.      overflow:hidden;
  4.      text-overflow: ellipsis;
  5.      white-space: nowrap;
  6.      };
  7. }
  8. .title{
  9.      width:200px;
  10.      @apply --overflow-ellipsis;
  11. }

自定义选择器

  自定义选择器通过@custom-selector来定义,后面跟随一个:--接着是自定义选择器的名称,后面是需要定义的选择器,多个用逗号隔开

  1. @custom-selector :--heading h1, h2, h3, h4, h5, h6;

  这样,:--heading就成为一个可以使用的选择器

  1. :--heading{
  2.      margin: 0;
  3. }
  4. h1, h2, h3, h4, h5, h6
  5.      margin: 0;
  6.  

  上面两段代码的效果相同

选择器嵌套

  CSS规则包含许多重复的内容

  1. table.colortable td {
  2.      text-align:center;
  3. }
  4. table.colortable td.{
  5.      text-transform:uppercase;
  6. }
  7. table.colortable td:first-child, table.colortable td:first-child+td {
  8.      border:1px solid black;
  9. }
  10. table.colortable th {
  11.      text-align:center;
  12.      background:black;
  13.      color:white;
  14. }

  使用嵌套语法后,代码如下

  1. table.colortable {
  2.      & td {
  3.      text-align:center;
  4.      &.{ text-transform:uppercase }
  5.      &:first-child, &:first-child + td { border:1px solid black }
  6.      }
  7.      & th {
  8.      text-align:center;
  9.      background:black;
  10.      color:white;
  11.      }
  12. }

  当使用嵌套样式规则时,必须能够引用由父规则匹配的元素; 毕竟是整个嵌套点。为了达到这个目的,这个规范定义了一个新的选择器,即嵌套选择器,写成ASCII符号&

  当在嵌套样式规则的选择器中使用时,嵌套选择器表示由父规则匹配的元素。在任何其他情况下使用时,它什么都不代表。(也就是说,它是有效的,但不匹配任何元素)

  [注意]&嵌套选择符的两种错误写法如下所示

  1. .foo {
  2.      color: red;
  3.      .bar & { color:blue; }
  4. }
  5. .foo {
  6.      color: red;
  7.      &.bar, .baz { color: blue; }
  8. }

【@nest】

  为了解决上面的嵌套选择符&的脆弱,可以使用@nest选择符,@nest可适用范围更广,只要与嵌套选择符&共同作用即可

  1. .foo {
  2.      color: red;
  3.      @nest & > .bar {
  4.      color: blue;
  5.      }
  6. }
  7. //等价于
  8.      .foo { color: red; }
  9.      .foo > .bar { color: blue; }
  10.  
  11. .foo {
  12.      color: red;
  13.      @nest .parent & {
  14.      color: blue;
  15.      }
  16. }
  17. //等价于
  18.      .foo { color: red; }
  19.      .parent .foo { color: blue; }
  20.  
  21. .foo {
  22.      color: red;
  23.      @nest :not(&) {
  24.      color: blue;
  25.      }
  26. }
  27. //等价于
  28.      .foo { color: red; }
  29.      :not(.foo) { color: blue; }
  30.  
  31.   [注意]@nest选择符的两种错误写法如下所示
  32.  
  33. .foo {
  34.      color: red;
  35.      @nest .bar {
  36.      color: blue;
  37.      }
  38. }
  39. .foo {
  40.      color: red;
  41.      @nest & .bar, .baz {
  42.      color: blue;
  43.      }
  44. }

最后

  遗憾地是,除了CSS变量variable可以在新版本chrome下使用外,其他CSS选择器的新用法目前都没有浏览器支持。但是,CSS后处理器postcss中的cssnext插件可以解决所有问题

  就像cssnext官网说的一样,今天就开始使用明天的CSS语法

总结

以上所述是小编给大家介绍的CSS选择器的新用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持! 

标签: CSS 选择器 用法