border-radius:1px 2px 3px 2px; 
/*添加圓角  四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */ 

 box-shadow:0px 0px 12px 5px #33CC00 inset; 
/*添加陰影 參數分別是  X軸偏移量 Y軸偏移量  【陰影模糊半徑】 【陰影擴展半徑】[陰影顏色]  [投影方式]*/ 

（1）. 陰影模糊半徑與陰影擴展半徑的區別：
陰影模糊半徑：此參數可選，其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴展半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮??；

（2）. X軸偏移量和Y軸偏移量值可以設置為負數
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];

1. X軸偏移量為負數：

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

效果圖：

2. Y軸偏移量為負數：

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

效果圖：

border-image:url(xx.jpg) 10px 20px no-repeat;/*為邊框應用圖片*/

顏色之RBGA

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

5.漸變色彩CSS3 Gradient 分為線性漸變與徑向漸變；

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

text-overflow與word-wrapa.text-overflow 用來設置是否使用一個省略號來標示對象文本的溢出

語法：

text-overflow只是用來說明文字溢出時用什么方式顯示，要實現溢出時實現省略號的效果，還需定義：
1.強制文本在一行內顯示
2.溢出內容問隱藏

代碼如下：

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

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

normal為瀏覽器默認值，break-word設置在長單詞或 URL地址內部進行換行，此屬性不常用，用瀏覽器默認值即可。

嵌入字體@font-face

語法：

@font-face { font-family : 字體名稱; src : 字體文件在服務器上的相對或絕對路徑;}

這樣設置之后，就可以像使用普通字體一樣在（font-）中設置字體樣式。
比如：
p { font-size :12px; font-family : "My Font";/必須項，設置@font-face中font-family同樣的值*/}

文本陰影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;

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-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 只能設置一個。

綜合練習

body{ background: #ebebeb;}.nav{ width:560px; 
height: 50px; font:bold 0/50px Arial; 
text-align:center; 
margin:40px auto 0;      
background: #f65f57; /*制作圓*/ border-radius:10px; /*制作導航立體風格*/         
box-shadow:0px 5px 0 #B64B41;}
.nav a{ display: inline-block; 
-webkit-transition: all 0.2s ease-in;
 -moz-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in; 
-ms-transition: all 0.2s ease-in; 
transition: all 0.2s ease-in;}
.nav a:hover{ -webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg); 
-o-transform:rotate(10deg); 
-ms-transform:rotate(10deg); 
transform:rotate(10deg);}
.nav li{ position:relative; display:inline-block; padding:0 16px; font-size: 13px; text-shadow:1px 2px 4px rgba(0,0,0,.5); 
list-style: none outside none;           
background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;/*使用偽元素制作導航列表項分隔線*/}       
 /*刪除第一項和最后一項導航分隔線*/
.nav li:last-child{    background:none;   }
.nav a,.nav a:hover{ color:#fff; text-decoration: none;}
</style>
</head>
<body>
<ul class="nav">   
  <li><a href="">Home</a></li>   
  <li><a href="">About Me</a></li>    
  <li><a href="">Portfolio</a></li>    
  <li><a href="">Blog</a></li>    
  <li><a href="">Resources</a></li>    
  <li><a href="">Contact Me</a></li>
</ul>
</body>
</html>

CSS3選擇器

1.屬性選擇器

在HTML中，通過各種各樣的屬性可以給元素增加很多附加的信息。例如，通過id屬性可以將不同div元素進行區分。
在CSS2中引入了一些屬性選擇器，而CSS3在CSS2的基礎上對屬性選擇器進行了擴展，新增了3個屬性選擇器，使得屬性選擇器有了通配符的概念，這三個屬性選擇器與CSS2的屬性選擇器共同構成了CSS功能強大的屬性選擇器。如下表所示：

: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功能。

結構性偽類選擇器-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">Brand</a>
</h2>
<div class="menuSection" id="brand"> content for Brand</div>

CSS代碼：

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

演示結果：

2、：target就是用來匹配id為“brand”的元素（id="brand"的元素）,上面代碼中是那個div元素。
多個url（多個target）處理：
就像上面的例子，#brand與后面的id="brand"是對應的，當同一個頁面上有很多的url的時候你可以取不同的名字，只要#號后對的名稱與id=""中的名稱對應就可以了。如下面例子：html代碼：

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand"> content for Brand</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake"> content for jake</div>
<h2><a href="#aron">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="##">Link1</a></li> 
  <li><a href="##">Link2</a></li> 
  <li><a href="##">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;}

結構性偽類選擇器——nth-last-child

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

演示結果：

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

演示結果：

:enable選擇器

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

結果演示

16. :disable選擇器
    “: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”偽元素是用來匹配突出顯示的文本(用鼠標選擇文本時的文本)。瀏覽器默認情況下，用鼠標選擇網頁文本是以“深藍的背景，白色的字體”顯示的，效果如下圖所示：

<p>“::selection”偽元素是用來匹配突出顯示的文本。瀏覽器默認情況下，選擇網站文本是深藍的背景，白色的字體，</p>

CSS代碼：

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

結果演示：

: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)都添加一個空元素，然后為這兩個空元素添加陰影特效。