你不知道的CSS（三）

本文首發於個人博客

在前面兩篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大體介紹了一些CSS方面比較隱晦的但又很實用的技巧。相信這些技巧會爲你們在項目實踐中帶來必定的幫助，本文做爲《你不知道的CSS》系列的第三篇文章，將繼續在CSS技巧方面進行探討，不一樣於前兩篇的是，本文將着重介紹CSS中僞類和僞元素在項目中的應用場景。僞類相信你們最熟悉也是用的最多的莫過於:hover, :active, :focus之類的，由於這些在日常的項目中太經常使用了（然而我目前依然見過還有用js去添加.hover類來變化背景色的同窗😴）。而僞元素如:before, :after相信你們也用的爛熟了。 固然對於比較常見的僞類（元素）不在本文的討論範圍類，本文主要介紹一些生僻的可是又很是實用的僞類(元素)。

CSS的世界已經變天了，拋開過去，擁抱變化吧~

僞類和僞元素的區別

僞類和僞元素是一個比較容易混淆的概念，這不只僅是從名稱上，並且在寫法上也是類似的（目前由於兼容性的問題，它們的寫法是一致的）。這就更容易混淆了😅。但仍是但願你們在書寫的過程當中養成習慣，至於兼容性交給postcss等轉換工具去實現。

規範

css3 明確規定了僞類用一個冒號:來表示，而僞元素則用兩個冒號::來表示。

區別

• 僞類更多的定義的是狀態，如:hover，或者說是一個可使用CSS進行修飾的特定的特殊元素，如:first-child
• 僞類使用一個冒號:
• 常見僞類：
  • :hover
  • :active
  • :focus
  • :visited
  • :link
  • :lang
  • :first-child
  • :last-child
  • :not
• 僞元素簡單來講就是不存在於DOM文檔樹中的虛擬的元素，它們和HTML元素同樣，可是你又沒法使用JavaScript去獲取，如:before
• 僞元素使用兩個冒號::
• 常見僞元素：
  • ::before
  • ::after
  • ::first-letter
  • ::first-line

用:valid和:invalid來作表單即時校驗

html5豐富了表單元素，提供了相似required,email,tel等表單元素屬性。一樣的，咱們能夠利用:valid和:invalid來作針對html5表單屬性的校驗。

• :required 僞類指定具備required 屬性的表單元素
• :valid 僞類指定一個經過匹配正確的所要求的表單元素
• :invalid 僞類指定一個不匹配指定要求的表單元素
  

  

  css實現表單校驗

有沒有最開始學angular的感受🤓，快點直戳demo感覺下吧

.valid {
  border-color: #429032;
  box-shadow: inset 5px 0 0 #429032;
}
.invalid {
  border-color: #D61D1D;
  box-shadow: inset 5px 0 0 #D61D1D;
}
.required {
  border-color: #056B9B;
  box-shadow: inset 5px 0 0 #056B9B;
}
input,
textarea {
  &:valid {
    @extend .valid;
  }
  &:invalid {
    @extend .invalid;
  } 
  &:required {
    @extend .required;
  }
}複製代碼

用:target來實現摺疊面板

:target是文檔的內部連接，即 URL 後面跟有錨名稱 #，指向文檔內某個具體的元素。

利用 :target 的特性能夠實現之前只能使用JavaScript實現的顯示隱藏或者Collapse 摺疊面板。

.collapse {
  >.collapse-body {
    display: none;
    &:target {
      display: block;
    }
  }
}複製代碼

target實現摺疊面板

預覽CSS實現Collapse摺疊面板demo

用:not來排除其餘選擇器

:not表示的是一個非/不是的概念。我在項目mo-css上用到過不少次，尤爲是在表單類中，我用它來設置表單元素在readonly 和 disabled狀態以外的hover等狀態，以便於當元素在readonly 和 disabled時，元素不具備hover狀態。

@mixin buttonStyle ($border, $background, $color, $hoverBorder, $hoverBackground, $hoverColor) {
    color: $color;
    border-color: $border;
    background-color: $background;
    &:not(.readonly):not([readonly]):not(.disabled):not([disabled]) {
        &:hover,
        &:active {
            color: $hoverColor;
            border-color: $hoverBorder;
            background-color: $hoverBackground;
        }
    }
}複製代碼

用:nth-child(even/odd)來實現隔行變色

:nth-child等僞類的參數大可能是一個數值或者數學表達式2n+1，而even做爲參數用來表示偶數，odd做爲參數用來表示奇數的相似於別罵的特性每每被忽略。

ul {
  &.odd {
    >li:nth-child(odd) {
      background: red;
    }
  }
  &.even {
    >li:nth-child(even) {
      background: green;
    }
  }
}複製代碼

odd/even在隔行變色中的應用

用::selection來美化選中文本

就像你用鼠標選中這段話看到的那樣，::selection用來設置選中文本的樣式，從而改變瀏覽器一成不變的文本選中色（藍色）。

::selection{
 color: #fff;
 background-color: #6bc30d;
}複製代碼

selection設置選中文本樣式

用::placeholder來美化佔位符

::placeholder用來修飾input/textarea等表單元素placeholder屬性的樣式。

<input type="text" placeholder="我是自定義的placeholder" />複製代碼

自定義placeholder

@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }
  &::-moz-placeholder {
    @content
  }
  &:-ms-input-placeholder {
    @content
  }
}
input, textarea {
   @include placeholder {
      color: #f00;
   }
}
//css
input::-webkit-input-placeholder{
    color: #f00;
}
input::-moz-placeholder{
     color: #f00;
}
input:-ms-input-placeholder{
     color: #f00;
}複製代碼

用::first-letter來實現段落首字下沉

首字下沉 ： 設置段落的第一行第一字字體變大，而且向下必定的距離，與後面的段落對齊，段落的其它部分保持原樣

首字下沉效果

就像圖中展現的那樣，以前實現相似效果，咱們須要多加一個標籤，如：

<p>
   <b>前</b>
    ...
</p>複製代碼

然而，如今只須要一個CSS僞元素就能夠實現。

first-letter 僞元素用於向文本的首字母設置特殊樣式

p::first-letter{
  font-size: 6em;
  line-height: 1;
  float: left;
}複製代碼

用::first-line來特殊標記段落第一行

就如它的名字同樣，這個僞元素表明了段落的第一行，你可使用任意樣式來控制它。

first-line標記段落第一行

p::first-line{
  color: red
}複製代碼

小結

CSS的僞類和僞元素還有不少，由於或兼容性或其餘緣由，文章中介紹的幾種僞類/元素用的比較少，這不得不說是一種遺憾。但，爲了保證項目的健康和可持續化，必定要注意僞類和僞元素的區別，儘量的在寫僞類的時候使用一個冒號:，而在寫僞元素的時候用兩個冒號::，就像使用autoprefixer來生成瀏覽器前綴同樣，將:和::的轉換交給postcss等工具去作。

系列文章

• 你不知道的CSS（一）
• 你不知道的CSS（二）

本文首發於個人博客