CSS挑选器的新用法(强烈推荐)

2021-03-17 13:44 jianzhan

前面的话

  如今,预解决器(如sass)好像早已变成开发设计CSS的标配,正如几年前jQuery是开发设计JS的标配1样。JS的querySelector效仿了jQuery的挑选器观念,CSS挑选器也效仿了预解决器的自变量界定、挑选器嵌套循环、编码块重用等常见作用。本文将详尽详细介绍CSS挑选器的新用法

自变量

  1般地,大家在开展web开发设计时,会有1套自变量界定标准,以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;}

  自变量申明就像一般的款式申明句子1样,还可以应用内联款式

<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()涵数也有1个可选主要参数,用来设定默认设置值,当自变量没法获得值时,则应用默认设置值

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

  [留意]有关CSS自变量的详尽用法移步至此

@apply

  详细介绍@apply以前,先详细介绍1下sass中的混和宏@mixin,指能够重用的编码块

  例如,普遍的文本外溢掩藏重用

@mixin overflow-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
div {
    @include  overflow-ellipsis;
}  

  而运用标准集@apply也是完成相近的作用。与var()相比,@apply是引入款式的结合,而var()是引入1个独立的款式值

:root{
  --overflow-ellipsis:{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
.title{
  width:200px;
  @apply --overflow-ellipsis;
}

自定挑选器

  自定挑选器根据@custom-selector来界定,后边追随1个:--接着是自定挑选器的名字,后边是必须界定的挑选器,好几个用逗号分隔

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

  这样,:--heading就变成1个可使用的挑选器

:--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;
  }
}

  当应用嵌套循环款式标准时,务必可以引入由父标准配对的元素; 终究是全部嵌套循环点。以便做到这个目地,这个标准界定了1个新的挑选器,即嵌套循环挑选器,写成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官方网站说的1样,今日就刚开始应用明日的CSS英语的语法

总结

以上所述是网编给大伙儿详细介绍的CSS挑选器的新用法,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!