屬于CSS3的新特性(一)

1. 相容性的解決

字首	浏覽器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

CSS3有哪些強大的效果昵？

選擇器
以前我們通常用class、 ID 或 tagname 來選擇HTML元素，CSS3的選擇器強大的難以置信。它們可以減少在标簽中的class和ID的數量更友善的維護樣式表、更好的實作結構與表現的分離      

圓角效果
以前做圓角通常使用背景圖檔，或繁瑣的元素拼湊，現在很簡單了 border-radius 幫你輕松搞定。

        
  
          

塊陰影與文字陰影
可以對任意DIV和文字增加投影效果。

        
  
        

色彩
CSS3支援更多的顔色和更廣泛的顔色定義。新顔色CSS3支援HSL ， CMYK ，HSLA and RGBA。      

漸變效果
以前隻能用Photoshop做出的圖檔漸變效果，現在可以用CCS寫出來了。IE中的濾鏡也可以實作。

        
  
        

個性化字型
網頁上的字型太單一？使用@Font-Face 輕松實作定制字型。

        
  
        

多背景圖
一個元素上添加多層背景圖檔。

        
  
        

邊框背景圖
邊框應用背景圖檔。      

變形處理
你可以對HTML元素進行旋轉、縮放、傾斜、移動、甚至以前隻能用JavaScript實作的強大動畫。

        
  
        

多欄布局
可以讓你不用使用多個div标簽就能實作多欄布局。浏覽器解釋這個屬性并生成多欄，讓文本實作一個仿報紙的多欄結構。

        
  
        

媒體查詢
針對不同螢幕分辨率，應用不同的樣式。

        
  
        

2. CSS3邊框 圓角效果 border-radius

 border-radius是向元素添加圓角邊框。

使用方法：

border-radius:10px;

border-radius: 5px 4px 3px 2px;  

不要以為border-radius的值隻能用px機關，你還可以用百分比或者em，但相容性目前還不太好。

實心上半圓：

方法：把高度(height)設為寬度（width）的一半，并且隻設定左上角和右上角的半徑與元素的高度一緻（大于也是可以的）。

div{
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半徑至少設定為height的值*/
    }      

實心圓：

方法：把寬度（width）與高度(height)值設定為一緻（也就是正方形），并且四個圓角值都設定為它們值的一半。如下代碼：

div{
    height:100px;/*與width設定一緻*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四個圓角值都設定為寬度或高度值的一半*/
    }      

3. CSS3邊框 

陰影 box-shadow（一）

box-shadow是向盒子添加陰影。支援添加一個或者多個。

很簡單的一段代碼，就實作了投影效果，酷斃了。我們來看下文法：

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴充半徑] [陰影顔色] [投影方式];      

參數介紹：

注意：inset 可以寫在參數的第一個或最後一個，其它位置是無效的。

為元素設定外陰影：

示例代碼：

.box_shadow{
  box-shadow:4px 2px 6px #333333; 
}      

效果：      

為元素設定内陰影：

示例代碼：

.box_shadow{
  box-shadow:4px 2px 6px #333333 inset; 
}      

效果：      

添加多個陰影：

以上的文法的介紹，就這麼簡單，如果添加多個陰影，隻需用逗号隔開即可。如：

.box_shadow{
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}      

效果：      

 陰影 box-shadow（二）

1、陰影模糊半徑與陰影擴充半徑的差別

陰影模糊半徑：此參數可選，其值隻能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴充半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；

2、X軸偏移量和Y軸偏移量值可以設定為負數

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴充半徑] [陰影顔色] [投影方式];      

X軸偏移量為負數：

.boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:-4px 4px 6px #666;
}      

效果：

Y軸偏移量為負數：

.boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:4px -4px 6px #666;
}      

效果圖：

4. CSS3邊框 為邊框應用圖檔 border-image

顧名思義就是為邊框應用背景圖檔，它和我們常用的background屬性比較相似。例如：

background:url(xx.jpg) 10px 20px no-repeat;      

但是又比背景圖檔複雜一些。

想象一下：一個矩形，有四個邊框。如果應用了邊框圖檔，圖檔該怎麼分布呢？ 圖檔會自動被切割分成四等分。用于四個邊框。

可以了解為它是一個切片工具，會自動把用做邊框的圖檔切割。怎麼切割呢？為了友善了解，做了一張特殊的圖檔，由9個矩形（70*70像素）拼成的一張圖（210*210像素），并标注好序号，是不是像傳說中的九宮圖，如下：


        
  
        

我們把上圖當作邊框圖檔 來應用一下， 看一看是什麼效果

根據border-image的文法：

#border-image{
   background:#F4FFFA;
   width:210px; height:210px; border:70px solid #ddd;
   border-image:url(borderimg.png) 70 repeat  
}      

效果：

從序号可以看出div的四個角分别對應了背景圖檔的四個角。而2,4,6,8 被重複。5在哪？因為是從四周向中心切割圖檔的是以，5顯示不出來。而在chrome浏覽器中5是存在的，下圖的樣子：


        
  
             


repeat的意思就是重複，目前因為是剛好被整除，效果看不出來。如果改下DIV的寬高，再來看重複的效果：


        
  
        

邊角部分為裁掉了，可見repeat就是一直重複，然後超出部分剪裁掉，而且是居中開始重複。

Round 參數：Round可以了解為圓滿的鋪滿。為了實作圓滿是以會壓縮（或拉伸）；

#border-image {

     width:170px;

     height:170px;

     border:70px solid;

     border-image:url(borderimg.png) 70 round;

 }      

效果：

可見圖檔被壓扁了。

Stretch 很好了解就是拉伸，有多長拉多長。有多遠“滾”多遠。

看一下效果：

2,4,6,8分别被拉伸顯示。

注意：Chrome下，中間部分也會被拉伸，webkit浏覽器對于round屬性和repeat屬性似乎沒有區分，顯示效果是一樣的。

Firefox 26.0 下是可以準确區分的。

5. CSS3顔色 

顔色之RGBA

RGB是一種色彩标準，是由紅(R)、綠(G)、藍(B)的變化以及互相疊加來得到各式各樣的顔色。RGBA是在RGB的基礎上增加了控制alpha透明度的參數。

文法：

color：rgba(R,G,B,A)      

以上R、G、B三個參數，正整數值的取值範圍為：0 - 255。百分數值的取值範圍為：0.0% - 100.0%。超出範圍的數值将被截至其最接近的取值極限。并非所有浏覽器都支援使用百分數值。A為透明度參數，取值在0~1之間，不可為負值。

代碼示例：

background-color:rgba(100,120,60,0.5);      

漸變色彩 

CSS3 Gradient 分為線性漸變(linear)和徑向漸變(radial)。由于不同的渲染引擎實作漸變的文法不同，這裡我們隻針對線性漸變的 W3C 标準文法來分析其用法，其餘大家可以查閱相關資料。W3C 文法已經得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏覽器的支援。

這一小節我們來說一下線性漸變：

參數：

第一個參數:指定漸變方向，可以用“角度”的關鍵詞或“英文”來表示：

第一個參數省略時，預設為“180deg”，等同于“to bottom”。

第二個和第三個參數，表示顔色的起始點和結束點，可以有多個顔色值。

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);      

效果圖：

6. CSS3文字與字型 

text-overflow 與 word-wrap

text-overflow用來設定是否使用一個省略标記（...）标示對象内文本的溢出。

文法：

但是text-overflow隻是用來說明文字溢出時用什麼方式顯示，要實作溢出時産生省略号的效果，還須定義強制文本在一行内顯示（white-space:nowrap）及溢出内容為隐藏（overflow:hidden），隻有這樣才能實作溢出文本顯示省略号的效果，代碼如下：

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;       

同時，word-wrap也可以用來設定文本行為，目前行超過指定容器的邊界時是否斷開轉行。

文法：

normal為浏覽器預設值，break-word設定在長單詞或 URL位址内部進行換行，此屬性不常用，用浏覽器預設值即可。

CSS3文字與字型 嵌入字型@font-face

@font-face能夠加載伺服器端的字型檔案，讓浏覽器端可以顯示使用者電腦裡沒有安裝的字型。

文法：

@font-face {
    font-family : 字型名稱;
    src : 字型檔案在伺服器上的相對或絕對路徑;
}      

這樣設定之後，就可以像使用普通字型一樣在（font-*）中設定字型樣式。

比如：

p {
    font-size :12px;
    font-family : "My Font";
    /*必須項，設定@font-face中font-family同樣的值*/
}      

CSS3文字與字型 文本陰影text-shadow

text-shadow可以用來設定文本的陰影效果。

文法：

text-shadow: X-Offset Y-Offset blur color;      

X-Offset：表示陰影的水準偏移距離，其值為正值時陰影向右偏移，反之向左偏移；      

Y-Offset：是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移，反之向上偏移；

Blur：是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以将Blur值設定為0；

Color：是指陰影的顔色，其可以使用rgba色。

比如，我們可以用下面代碼實作設定陰影效果。

text-shadow: 0 1px 1px #fff      

7. CSS3背景

 background-origin

設定元素背景圖檔的原始起始位置。

文法：

background-origin ： border-box | padding-box | content-box;      

參數分别表示背景圖檔是從邊框，還是内邊距（預設值），或者是内容區域開始顯示。

效果如下：

需要注意的是，如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。

background-clip

用來将背景圖檔做适當的裁剪以适應實際需要。

文法：

background-clip ： border-box | padding-box | content-box | no-clip      

參數分别表示從 邊框、或 内填充，或者 内容區域向外裁剪背景。

no-clip表示不裁切，和參數border-box顯示同樣的效果。backgroud-clip預設值為border-box。

效果如下圖所示：

 background-size

設定背景圖檔的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖檔進行伸縮。

文法：

background-size: auto | <長度值> | <百分比> | cover | contain      

取值說明：

1、auto：預設值，不改變背景圖檔的原始高度和寬度；

2、<長度值>：成對出現如200px 50px，将背景圖檔寬高依次設定為前面兩個值，當設定一個值時，将其作為圖檔寬度值來等比縮放；

3、<百分比>：0％~100％之間的任何值，将背景圖檔寬高依次設定為所在元素寬高乘以前面百分比得出的數值，當設定一個值時同上；

4、cover：顧名思義為覆寫，即将背景圖檔等比縮放以填滿整個容器；

5、contain：容納，即将背景圖檔等比縮放至某一邊緊貼容器邊緣為止。

提示：大家可以在右邊的編輯視窗輸入自己的代碼嘗試不同取值的效果。

multiple backgrounds

多重背景，也就是CSS2裡background的屬性外加origin、clip和size組成的新background的多次疊加，縮寫時為用逗号隔開的每組值；用分解寫法時，如果有多個背景圖檔，而其他屬性隻有一個（例如background-repeat隻有一個），表明所有背景圖檔應用該屬性值。

文法縮寫如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...      

可以把上面的縮寫拆解成以下形式：

background-image:url1,url2,...,urlN;

background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;      

注意：

• 用逗号隔開每組 background 的縮寫值；
• 如果有 size 值，需要緊跟 position 并且用 "/" 隔開；
• 如果有多個背景圖檔，而其他屬性隻有一個（例如 background-repeat 隻有一個），表明所有背景圖檔應用該屬性值。
• background-color 隻能設定一個。

8. CSS3選擇器(一)

屬性選擇器

   在HTML中，通過各種各樣的屬性可以給元素增加很多附加的資訊。例如，通過id屬性可以将不同div元素進行區分。

   在CSS2中引入了一些屬性選擇器，而CSS3在CSS2的基礎上對屬性選擇器進行了擴充，新增了3個屬性選擇器，使得屬性選擇器有了通配符的概念，這三個屬性選擇器與CSS2的屬性選擇器共同構成了CSS功能強大的屬性選擇器。如下表所示：

 執行個體展示：

html代碼：

<a href="xxx.pdf" target="_blank" rel="external nofollow" >我連結的是PDF檔案</a>
<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="icon">我類名是icon</a>
<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  title="我的title是more">我的title是more</a>      

css代碼  ：

a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}      

 結果顯示：

CSS3 結構性僞類選擇器—root

:root選擇器，從字面上我們就可以很清楚的了解是根選擇器，他的意思就是比對元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。

示例示範：

通過“:root”選擇器設定背景顔色

HTML代碼：

<div>:root選擇器的示範</div>      

CSS代碼：

:root {
  background:orange;
}      

示範結果：

“:root”選擇器等同于<html>元素，簡單點說：

:root{background:orange}

html {background:orange;}

得到的效果等同。

建議使用:root方法。

另外在IE９以下還可以借助“:root”實作hack功能。

CSS3 結構性僞類選擇器—not

:not選擇器稱為 否定選擇器，和jQuery中的:not選擇器一模一樣，可以選 擇除某個元素之外的所有元素。

就拿form元素來說，比如說你想給表單中除submit按鈕之外的input元素添加紅色邊框，CSS代碼可以寫成：

form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bottom: 20px;
}
input:not([type="submit"]){
  border:1px solid red;
}      

相關HTML代碼：

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>
  <div>
    <label for="name">Password Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>  ​      

示範結果：

結構性僞類選擇器—empty

:empty選擇器表示的就是空。用來選擇沒有任何内容的元素，這裡沒有内容指的是一點内容都沒有，哪怕是一個空格。

示例顯示：

比如說，你的文檔中有三個段落p元素，你想把沒有任何内容的P元素隐藏起來。我們就可以使用“:empty”選擇器來控制。

HTML代碼：

<p>我是一個段落</p>
<p> </p>
<p></p>​      

CSS代碼：

p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}​      

示範結果：

結構性僞類選擇器—target

:target選擇器稱為目标選擇器，用來比對文檔(頁面)的url的某個标志符的目标元素。我們先來上個例子，然後再做分析。

示例展示

點選連結顯示隐藏的段落。

HTML代碼：

<h2><a href="#brand" target="_blank" rel="external nofollow" >Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>      

CSS代碼：

.menuSection{
  display: none;
}
:target{/*這裡的:target就是指id="brand"的div對象*/
  display:block;
}      

示範結果：

分析：

1、具體來說，觸發元素的URL中的标志符通常會包含一個#号，後面帶有一個标志符名稱，上面代碼中是：#brand

2、：target就是用來比對id為“brand”的元素（id="brand"的元素）,上面代碼中是那個div元素。

多個url（多個target）處理：

就像上面的例子，#brand與後面的id="brand"是對應的，當同一個頁面上有很多的url的時候你可以取不同的名字，隻要#号後對的名稱與id=""中的名稱對應就可以了。

如下面例子：

html代碼：  

<h2><a href="#brand" target="_blank" rel="external nofollow" >Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake" target="_blank" rel="external nofollow" >Brand</a></h2>
<div class="menuSection" id="jake">
 content for jake
</div>
<h2><a href="#aron" target="_blank" rel="external nofollow" >Brand</a></h2>
<div class="menuSection" id="aron">
    content for aron
</div>      

css代碼：

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}      

上面的代碼可以對不同的target對象分别設定不的樣式。

結構性僞類選擇器—first-child

“:first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點了解就是選擇元素中的第一個子元素，記住是子元素，而不是後代元素。

示例示範

通過“:first-child”選擇器定位清單中的第一個清單項，并将序列号顔色變為紅色。

HTML代碼：

<ol>
  <li><a href="##" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link1</a></li>
  <li><a href="##" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link2</a></li>
  <li><a href="##" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >link3</a></li>
</ol>      

CSS代碼：

ol > li{
  font-size:20px;
  font-weight: bold;
  margin-bottom: 10px;
}

ol a {
  font-size: 16px;
  font-weight: normal;
}

ol > li:first-child{
  color: red;
}      

示範結果：

結構性僞類選擇器—last-child

“:last-child”選擇器與“:first-child”選擇器作用類似，不同的是“:last-child”選擇器選擇的是元素的最後一個子元素。例如，需要改變的是清單中的最後一個“li”的背景色，就可以使用這個選擇器，

ul>li:last-child{background:blue;}

示例示範

在部落格的排版中，每個段落都有15px的margin-bottom，假設不想讓部落格“post”中最後一個段落不需要底部的margin值，可以使用“:last-child”選擇器。

HTML代碼：

<div class="post">
  <p>第一段落</p>
  <p>第二段落</p>
  <p>第三段落</p>
  <p>第四段落</p>
  <p>第五段落</p>
</div>​      

CSS代碼：

.post {
  padding: 10px;
  border: 1px solid #ccc;
  width: 200px;
  margin: 20px auto;
}
.post p {
  margin:0 0 15px 0;
}

.post p:last-child {
  margin-bottom:0;
}      

示範結果：

結構性僞類選擇器—nth-child(n)

“:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數，而且可以是整數值(1,2,3,4)，也可以是表達式(2n+1、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值為0時，選擇器将選擇不到任何比對的元素。

經驗與技巧:當“:nth-child(n)”選擇器中的n為一個表達式時，其中n是從0開始計算，當表達式的值為0或小于0的時候，不選擇任何比對的元素。如下表所示：

案例示範

  通過“:nth-child(n)”選擇器，并且參數使用表達式“2n”，将偶數行清單背景色設定為橙色。

HTML代碼：

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>​      

CSS代碼：

ol > li:nth-child(2n){
  background: orange;
}      

示範結果：

CSS3 結構性僞類選擇器—nth-last-child(n)

“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似，隻是這裡多了一個“last”，所起的作用和“:nth-child(n)”選擇器有所差別，從某父元素的最後一個子元素開始計算，來選擇特定的元素。

案例示範

選擇清單中倒數第五個清單項，将其背景設定為橙色。

HTML代碼：

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
  <li>item11</li>
  <li>item12</li>
  <li>item13</li>
  <li>item14</li>
  <li>item15</li>
</ol>​      

CSS代碼：

ol > li:nth-last-child(5){
  background: orange;
}      

示範結果：

first-of-type選擇器

“:first-of-type”選擇器類似于“:first-child”選擇器，不同之處就是 指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。

示例示範：

通過“:first-of-type”選擇器，定位div容器中的第一個p元素（p不一定是容器中的第一個子元素），并設定其背景色為橙色。

HTML代碼：

<div class="wrapper">
  <div>我是一個塊元素，我是.wrapper的第一個子元素</div>
  <p>我是一個段落元素，我是不是.wrapper的第一個子元素，但是他的第一個段落元素</p>
  <p>我是一個段落元素</p>
  <div>我是一個塊元素</div>
</div>      

CSS代碼：

.wrapper {
  width: 500px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  color: #fff;
}
.wrapper > div {
  background: green;
}
.wrapper > p {
  background: blue;
}
/*我要改變第一個段落的背景為橙色*/
.wrapper > p:first-of-type {
  background: orange;
}      

示範結果：

nth-of-type(n)選擇器

“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它隻計算父元素中指定的某種類型的子元素。當某個元素中的子元素不單單是同一種類型的子元素時，使用“:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素是非常友善和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”參數也一樣，可以是具體的 整數，也可以是 表達式，還可以是 關鍵詞。

示例示範

通過“:nth-of-type(2n)”選擇器，将容器“div.wrapper”中偶數段數的背景設定為橙色。

HTML代碼：

<div class="wrapper">
  <div>我是一個Div元素</div>
  <p>我是一個段落元素</p>
  <div>我是一個Div元素</div>
  <p>我是一個段落</p>
  <div>我是一個Div元素</div>
  <p>我是一個段落</p>
  <div>我是一個Div元素</div>
  <p>我是一個段落</p>
  <div>我是一個Div元素</div>
  <p>我是一個段落</p>
  <div>我是一個Div元素</div>
  <p>我是一個段落</p>
  <div>我是一個Div元素</div>
  <p>我是一個段落</p>
  <div>我是一個Div元素</div>
  <p>我是一個段落</p>
</div>      

CSS代碼：

.wrapper > p:nth-of-type(2n){
  background: orange;
}      

示範結果：

last-of-type選擇器

“:last-of-type”選擇器和“:first-of-type”選擇器功能是一樣的，不同的是他選擇是父元素下的某個類型的最後一個子元素。

示例示範

通過“:last-of-type”選擇器，将容器“div.wrapper”中最後一個段落元素背景設定為橙色

（提示：這個段落不是“div.wrapper”容器的最後一個子元素）。

HTML代碼：

<div class="wrapper">
  <p>我是第一個段落</p>
  <p>我是第二個段落</p>
  <p>我是第三個段落</p>
  <div>我是第一個Div元素</div>
  <div>我是第二個Div元素</div>
  <div>我是第三個Div元素</div>
</div>      

CSS代碼：

.wrapper > p:last-of-type{
  background: orange;
}
      

示範結果：

CSS3 nth-last-of-type(n)選擇器

“:nth-last-of-type(n)”選擇器和“:nth-of-type(n)”選擇器是一樣的，選擇父元素中指定的某種子元素類型，但它的起始方向是從最後一個子元素開始，而且它的使用方法類似于上節中介紹的“:nth-last-child(n)”選擇器一樣。

示例示範

通過“:nth-last-of-type(n)”選擇器将容器“div.wrapper”中的倒數第三個段落背景設定為橙色。

HTML代碼：

<div class="wrapper">
  <p>我是第一個段落</p>
  <p>我是第二個段落</p>
  <p>我是第三個段落</p>
  <p>我是第四個段落</p>
  <p>我是第五個段落</p>
  <div>我是一個Div元素</div>
  <p>我是第六個段落</p>
  <p>我是第七個段落</p>
</div>      

CSS代碼：

.wrapper > p:nth-last-of-type(3){
  background: orange;
}      

示範結果：

only-child選擇器

“:only-child”選擇器選擇的是父元素中隻有一個子元素，而且隻有唯一的一個子元素。也就是說，比對的元素的父元素中僅有一個子元素，而且是一個唯一的子元素。

示例示範

通過“:only-child”選擇器，來控制僅有一個子元素的背景樣式，為了更好的了解，我們這個示例通過對比的方式來向大家示範。

HTML代碼：

<div class="post">
  <p>我是一個段落</p>
  <p>我是一個段落</p>
</div>
<div class="post">
  <p>我是一個段落</p>
</div>      

CSS代碼：

.post p {
  background: green;
  color: #fff;
  padding: 10px;
}
.post p:only-child {
  background: orange;
}      

示範結果：

only-of-type選擇器

“:only-of-type”選擇器用來選擇一個元素是它的父元素的唯一一個相同類型的子元素。這樣說或許不太好了解，換一種說法。“:only-of-type”是表示一個元素他有很多個子元素，而其中隻有一種類型的子元素是唯一的，使用“:only-of-type”選擇器就可以選中這個元素中的唯一一個類型子元素。

示例示範

通過“:only-of-type”選擇器來修改容器中僅有一個div元素的背景色為橙色。

HTML代碼：

<div class="wrapper">
  <p>我是一個段落</p>
  <p>我是一個段落</p>
  <p>我是一個段落</p>
  <div>我是一個Div元素</div>
</div>
<div class="wrapper">
  <div>我是一個Div</div>
  <ul>
    <li>我是一個清單項</li>
  </ul>
  <p>我是一個段落</p>
</div>      

CSS代碼：

.wrapper > div:only-of-type {
  background: orange;
}      

示範結果：

enabled選擇器

在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀态，比如輸入框，密碼框，複選框等。在預設情況之下，這些表單元素都處在可用狀态。那麼我們可以通過僞選擇器“:enabled”對這些表單元素設定樣式。

示例示範

通過“:enabled”選擇器，修改文本輸入框的邊框為2像素的紅色邊框，并設定它的背景為灰色。

HTML代碼:

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="可用輸入框"  />
  </div>
   <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="禁用輸入框"  disabled="disabled" />
  </div>
</form>        

CSS代碼：

div{
  margin: 20px;
}
input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}      

結果示範

disabled選擇器

“:disabled”選擇器剛好與“:enabled”選擇器相反，用來選擇不可用表單元素。要正常使用“:disabled”選擇器，需要在表單元素的HTML中設定“disabled”屬性。

示例示範

通過“:disabled”選擇器，給不可用輸入框設定明顯的樣式。

HTML代碼：

<form action="#">
  <div>
    <input type="text" name="name" id="name" placeholder="我是可用輸入框" />
  </div>
  <div>
    <input type="text" name="name" id="name" placeholder="我是不可用輸入框" disabled />
  </div>
</form>        

CSS代碼

form {
  margin: 50px;
}
div {
  margin-bottom: 20px;
}
input {
  background: #fff;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 3px;
}
input[type="text"]:disabled {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.15);
  color: rgba(0,0,0,.15);
}      

結果示範：

checked選擇器

在表單元素中，單選按鈕和複選按鈕都具有選中和未選中狀态。（大家都知道，要覆寫這兩個按鈕預設樣式比較困難）。在CSS3中，我們可以通過狀态選擇器“:checked”配合其他标簽實作自定義樣式。而“:checked”表示的是選中狀态。

示例示範：

通過“:checked”狀态來自定義複選框效果。

HTML代碼

<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="checkbox" checked="checked" id="usename" /><span>√</span>
    </div>
    <lable for="usename">我是選中狀态</lable>
  </div>
  
  <div class="wrapper">
    <div class="box">
      <input type="checkbox"  id="usepwd" /><span>√</span>
    </div>
    <label for="usepwd">我是未選中狀态</label>
  </div>
</form>       

CSS代碼：

form {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  margin: 30px auto;
}

.wrapper {
  margin-bottom: 10px;
}

.box {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: relative;
  border: 2px solid orange;
  vertical-align: middle;
}

.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
}

.box span {
  position: absolute;
  top: -10px;
  right: 3px;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  color: orange;
}

input[type="checkbox"] + span {
  opacity: 0;
}

input[type="checkbox"]:checked + span {
  opacity: 1;
}      

結果示範

::selection選擇器

“::selection”僞元素是用來比對突出顯示的文本(用滑鼠選擇文本時的文本)。浏覽器預設情況下，用滑鼠選擇網頁文本是以“深藍的背景，白色的字型”顯示的，

效果如下圖所示：

從上圖中可以看出，用滑鼠選中“專注IT、網際網路技術”、“純幹貨、學以緻用”、“沒錯、這是免費的”這三行文本中，預設顯示樣式為：藍色背景、白色文本。

有的時候設計要求,不使用上圖那種浏覽器預設的突出文本效果，需要一個與衆不同的效果，此時“::selection”僞元素就非常的實用。不過在Firefox浏覽器還需要添加字首。

示例示範:

通過“::selection”選擇器，将Web中選中的文本背景變成紅色，文本變成綠色

HTML代碼：

<p>“::selection”僞元素是用來比對突出顯示的文本。浏覽器預設情況下，選擇網站文本是深藍的背景，白色的字型，</p>      

CSS代碼：

::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}      

結果示範：

注意：

1、IE9+、Opera、Google Chrome 以及 Safari 中支援 ::selection 選擇器。

2、Firefox 支援替代的 ::-moz-selection。

read-only選擇器

“:read-only”僞類選擇器用來指定處于隻讀狀态元素的樣式。簡單點了解就是，元素中設定了“readonly=’readonly’”

示例示範

通過“:read-only”選擇器來設定位址文本框的樣式。

HTML代碼：

<form action="#">
  <div>
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" placeholder="大漠" />
  </div>
  <div>
    <label for="address">位址:</label>
    <input type="text" name="address" id="address" placeholder="中國上海" readonly="readonly" />
  </div>
</form>        

CSS代碼：

form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}

input[type="text"]{
  border: 1px solid orange;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
}

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}      

結果示範

read-write選擇器

“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來指定當元素處于非隻讀狀态時的樣式。

示例示範

使用“:read-write”選擇器來設定不是隻讀控件的文本框樣式。

HTML代碼：

<form action="#">
  <div>
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" placeholder="大漠" />
  </div>
  <div>
    <label for="address">位址:</label>
    <input type="text" name="address" id="address" placeholder="中國上海" readonly="readonly" />
  </div>
</form>        

CSS代碼：

form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}

input[type="text"]{
  border: 1px solid orange;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
}

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}

input[type="text"]:-moz-read-write{
  border-color: #f36;
}
input[type="text"]:read-write{
  border-color: #f36;
}      

結果示範：

::before和::after

::before和::after這兩個主要用來給元素的前面或後面插入内容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。

.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}      

當然可以利用他們制作出其他更好的效果，比如右側中的陰影效果，也是通過這個來實作的。

關鍵代碼分析：

.effect::before, .effect::after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}      

上面代碼作用在class名叫.effect上的div的前（before）後(after)都添加一個空元素，然後為這兩個空元素添加陰影特效。