CSS选择器的新用法

前面的话

　　现在，预处理器(如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语法