CSS選擇器的新用法(推薦)

發(fā)布時間：2018-02-02 13:45:59 作者：佚名

本文將詳細介紹CSS選擇器的新用法，感興趣的朋友一起學習吧

前面的話

　　現(xiàn)在，預(yù)處理器(如sass)似乎已經(jīng)成為開發(fā)CSS的標配，正如幾年前jQuery是開發(fā)JS的標配一樣。JS的querySelector借鑒了jQuery的選擇器思想，CSS選擇器也借鑒了預(yù)處理器的變量定義、選擇器嵌套、代碼塊重用等常用功能。本文將詳細介紹CSS選擇器的新用法

變量

　　一般地，我們在進行web開發(fā)時，會有一套變量定義規(guī)范，以sass為例，如下所示

// 顏色定義規(guī)范
$color-background : #222
$color-background-d : rgba(0, 0, 0, 0.3)
$color-highlight-background : #333
//字體定義規(guī)范
$font-size-small : 12px
$font-size-medium : 14px
$font-size-large : 18px

　　而CSS變量的語法如下

【聲明變量】

　　變量必須以--開頭。例如--example-variable: 20px，意思是將20px賦值給--example-varibale變量

　　可以將聲明變量的語句置于任何元素內(nèi)，如果要設(shè)置全局變量，則可以設(shè)置為:root、body或html

:root{--bgColor:#000;}

　　變量聲明就像普通的樣式聲明語句一樣，也可以使用內(nèi)聯(lián)樣式

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

【使用變量】

　　使用var()函數(shù)使用變量，并且可以被使用在任意的地方。例如：var(--example-variable)會返回--example-variable所對應(yīng)的值

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

　　var()函數(shù)還有一個可選參數(shù)，用來設(shè)置默認值，當變量無法取得值時，則使用默認值

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

　　[注意]關(guān)于CSS變量的詳細用法移步至此

@apply

　　介紹@apply之前，先介紹一下sass中的混合宏@mixin，指可以重用的代碼塊

　　比如，常見的文字溢出隱藏重用

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

　　而應(yīng)用規(guī)則集@apply也是實現(xiàn)類似的功能。與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規(guī)則包含許多重復(fù)的內(nèi)容

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

　　當使用嵌套樣式規(guī)則時，必須能夠引用由父規(guī)則匹配的元素; 畢竟是整個嵌套點。為了達到這個目的，這個規(guī)范定義了一個新的選擇器，即嵌套選擇器，寫成ASCII符號＆

　　當在嵌套樣式規(guī)則的選擇器中使用時，嵌套選擇器表示由父規(guī)則匹配的元素。在任何其他情況下使用時，它什么都不代表。（也就是說，它是有效的，但不匹配任何元素）

　　[注意]&嵌套選擇符的兩種錯誤寫法如下所示

.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官網(wǎng)說的一樣，今天就開始使用明天的CSS語法

總結(jié)

以上所述是小編給大家介紹的CSS選擇器的新用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！