国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

你不知道的CSS（三）

xiangzhihong / 1011人閱讀

摘要：本文首發(fā)于我的博客在前面兩篇文章你不知道的一和你不知道的二中大致介紹了一些方面比較隱晦的但又很實(shí)用的技巧。系列文章你不知道的一你不知道的二本文首發(fā)于我的博客

本文首發(fā)于我的博客

在前面兩篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介紹了一些CSS方面比較隱晦的但又很實(shí)用的技巧。相信這些技巧會(huì)為大家在項(xiàng)目實(shí)踐中帶來一定的幫助，本文作為《你不知道的CSS》系列的第三篇文章，將繼續(xù)在CSS技巧方面進(jìn)行探討，不同于前兩篇的是，本文將著重介紹CSS中偽類和偽元素在項(xiàng)目中的應(yīng)用場(chǎng)景。偽類相信大家最熟悉也是用的最多的莫過于:hover, :active, :focus之類的，因?yàn)檫@些在平常的項(xiàng)目中太常用了（然而我目前依然見過還有用js去添加.hover類來變化背景色的同學(xué)?）。而偽元素如:before, :after相信大家也用的爛熟了。 當(dāng)然對(duì)于比較常見的偽類（元素）不在本文的討論范圍類，本文主要介紹一些生僻的但是又非常實(shí)用的偽類(元素)。

CSS的世界已經(jīng)變天了，拋開過去，擁抱變化吧~

偽類和偽元素的區(qū)別

偽類和偽元素是一個(gè)比較容易混淆的概念，這不僅僅是從名稱上，而且在寫法上也是相似的（目前因?yàn)榧嫒菪缘膯栴}，它們的寫法是一致的）。這就更容易混淆了?。但還是希望大家在書寫的過程中養(yǎng)成習(xí)慣，至于兼容性交給postcss等轉(zhuǎn)換工具去實(shí)現(xiàn)。

規(guī)范 
css3 明確規(guī)定了偽類用一個(gè)冒號(hào):來表示，而偽元素則用兩個(gè)冒號(hào)::來表示。
區(qū)別

偽類更多的定義的是狀態(tài)，如:hover，或者說是一個(gè)可以使用CSS進(jìn)行修飾的特定的特殊元素，如:first-child

偽類使用一個(gè)冒號(hào):

常見偽類：

:hover

:active

:focus

:visited

:link

:lang

:first-child

:last-child

:not

偽元素簡(jiǎn)單來說就是不存在于DOM文檔樹中的虛擬的元素，它們和HTML元素一樣，但是你又無法使用JavaScript去獲取，如:before

偽元素使用兩個(gè)冒號(hào)::

常見偽元素：

::before

::after

::first-letter

::first-line

用:valid和:invalid來做表單即時(shí)校驗(yàn)

html5豐富了表單元素，提供了類似required,email,tel等表單元素屬性。同樣的，我們可以利用:valid和:invalid來做針對(duì)html5表單屬性的校驗(yàn)。

:required 偽類指定具有required 屬性的表單元素

:valid 偽類指定一個(gè)通過匹配正確的所要求的表單元素

:invalid 偽類指定一個(gè)不匹配指定要求的表單元素

有沒有最開始學(xué)angular的感覺?，快點(diǎn)直戳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來實(shí)現(xiàn)折疊面板 
:target是文檔的內(nèi)部鏈接，即 URL 后面跟有錨名稱 #，指向文檔內(nèi)某個(gè)具體的元素。

利用 :target 的特性可以實(shí)現(xiàn)以前只能使用JavaScript實(shí)現(xiàn)的顯示隱藏或者Collapse 折疊面板。

.collapse {
  >.collapse-body {
    display: none;
    &:target {
      display: block;
    }
  }
}


預(yù)覽CSS實(shí)現(xiàn)Collapse折疊面板demo

用:not來排除其他選擇器

:not表示的是一個(gè)非/不是的概念。我在項(xiàng)目mo-css上用到過很多次，尤其是在表單類中，我用它來設(shè)置表單元素在readonly 和 disabled狀態(tài)之外的hover等狀態(tài)，以便于當(dāng)元素在readonly 和 disabled時(shí)，元素不具有hover狀態(tài)。

@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)來實(shí)現(xiàn)隔行變色

:nth-child等偽類的參數(shù)大多是一個(gè)數(shù)值或者數(shù)學(xué)表達(dá)式2n+1，而even作為參數(shù)用來表示偶數(shù)，odd作為參數(shù)用來表示奇數(shù)的類似于別罵的特性往往被忽略。

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

用::selection來美化選中文本

就像你用鼠標(biāo)選中這段話看到的那樣，::selection用來設(shè)置選中文本的樣式，從而改變?yōu)g覽器一成不變的文本選中色（藍(lán)色）。

::selection{
 color: #fff;
 background-color: #6bc30d;
}

用::placeholder來美化占位符

::placeholder用來修飾input/textarea等表單元素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來實(shí)現(xiàn)段落首字下沉 
首字下沉 ： 設(shè)置段落的第一行第一字字體變大，并且向下一定的距離，與后面的段落對(duì)齊，段落的其它部分保持原樣

就像圖中展示的那樣，之前實(shí)現(xiàn)類似效果，我們需要多加一個(gè)標(biāo)簽，如：


   前
    ...

然而，現(xiàn)在只需要一個(gè)CSS偽元素就可以實(shí)現(xiàn)。

first-letter 偽元素用于向文本的首字母設(shè)置特殊樣式
p::first-letter{
  font-size: 6em;
  line-height: 1;
  float: left;
}
用::first-line來特殊標(biāo)記段落第一行

就如它的名字一樣，這個(gè)偽元素代表了段落的第一行，你可以使用任意樣式來控制它。

p::first-line{
  color: red
}
小結(jié)

CSS的偽類和偽元素還有很多，因?yàn)榛蚣嫒菪曰蚱渌?，文章中介紹的幾種偽類/元素用的比較少，這不得不說是一種遺憾。但，為了保證項(xiàng)目的健康和可持續(xù)化，一定要注意偽類和偽元素的區(qū)別，盡可能的在寫偽類的時(shí)候使用一個(gè)冒號(hào):，而在寫偽元素的時(shí)候用兩個(gè)冒號(hào)::，就像使用autoprefixer來生成瀏覽器前綴一樣，將:和::的轉(zhuǎn)換交給postcss等工具去做。

系列文章

你不知道的CSS（一）

你不知道的CSS（二）

本文首發(fā)于我的博客

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112623.html

相關(guān)文章

  • 你不知道的Virtual DOM（二）：Virtual Dom的更新

    摘要：變化的只有種更新和刪除。頁面的元素的數(shù)量隨著而變。四總結(jié)本文詳細(xì)介紹如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的算法，再根據(jù)計(jì)算出的差異去更新真實(shí)的。 歡迎關(guān)注我的公眾號(hào)睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 目前最流行的兩大前端框架，React 和 Vue，都不約而同的借助 Virtual DOM 技術(shù)提高頁面的渲染...

    testbird 評(píng)論0 收藏0

  • 你不知道的width:auto

    摘要：比方說，這些元素的寬度默認(rèn)是與父級(jí)容器的。典型代表就是浮動(dòng)絕對(duì)定位元素或者元素，英文稱為，收縮到合適中的指的就是這種寬度表現(xiàn)收縮到最小。 ????說到widh:auto這個(gè)屬性大家一定不陌生，也都知道width的默認(rèn)值是auto,正因?yàn)閍uto是默認(rèn)值，極少有人去關(guān)注auto的寬度表現(xiàn)，下面就讓我介紹一下我認(rèn)識(shí)的auto的四種寬度表現(xiàn) 1.充分利用可用空間。比方說，、這些元素的寬度默認(rèn)...

    DandJ 評(píng)論0 收藏0

  • 你不知道的瀏覽器頁面渲染機(jī)制

    摘要：前言瀏覽器的內(nèi)核是指支持瀏覽器運(yùn)行的最核心的程序，分為兩個(gè)部分的，一是渲染引擎，另一個(gè)是引擎。渲染引擎在不同的瀏覽器中也不是都相同的。接下來就是瀏覽器的渲染過程。布局完成后，瀏覽器會(huì)立即發(fā)出和事件，將渲染樹轉(zhuǎn)換成屏幕上的像素。 前言 瀏覽器的內(nèi)核是指支持瀏覽器運(yùn)行的最核心的程序，分為兩個(gè)部分的，一是渲染引擎，另一個(gè)是JS引擎。渲染引擎在不同的瀏覽器中也不是都相同的。目前市面上常見的瀏覽...

    aboutU 評(píng)論0 收藏0

  • 你不知道的瀏覽器頁面渲染機(jī)制

    摘要：前言瀏覽器的內(nèi)核是指支持瀏覽器運(yùn)行的最核心的程序，分為兩個(gè)部分的，一是渲染引擎，另一個(gè)是引擎。渲染引擎在不同的瀏覽器中也不是都相同的。接下來就是瀏覽器的渲染過程。布局完成后，瀏覽器會(huì)立即發(fā)出和事件，將渲染樹轉(zhuǎn)換成屏幕上的像素。 前言 瀏覽器的內(nèi)核是指支持瀏覽器運(yùn)行的最核心的程序，分為兩個(gè)部分的，一是渲染引擎，另一個(gè)是JS引擎。渲染引擎在不同的瀏覽器中也不是都相同的。目前市面上常見的瀏覽...

    zhunjiee 評(píng)論0 收藏0

  • 【譯】一些你不知道的CSS屬性

    摘要：目前，和不支持該屬性，但不久后就會(huì)改變。承諾支持該屬性，值得期待等支持該屬性。在知乎的一個(gè)專欄上介紹了三個(gè)奇淫技巧，很有用，補(bǔ)充在此文后面關(guān)于幾乎沒人知道的件事英文原文譯文出處一些你不知道的屬性 Box-sizing 盡管box-sizing在CSS3中才被引入，其有一個(gè)值是border-box，讓元素的高和寬包含了填充和邊框。 .div { width: 150px; ...

    U2FsdGVkX1x 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<