1.<map>圖像映射
點擊圖片不同區域
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>
2.<iframe>inline frame 用於自己的網頁上加載第三方網頁
<iframe src="http://www.baidu.com" width="200px" height="200px"> <p>baidu</p> </iframe>
iframe屬性
srcdoc,seamless,sandbox限制行爲
3.<video>
按順序找source，直到找到一個可用的爲止。
<video width="200px" height="200px"> <source src="a.webm" type=‘video/webm;codecs="vp8,vorbis"'/> <source src="a.mp4" type=‘video/mp4;codecs="......"'/> <source src="a.ogv" type=‘video/ogv;codecs="....."'/> <object> ...flash </object> </video>
4.<link> alternate stylesheet
<link>標籤
rel="stylesheet"屬性指定將一個樣式表立即應用到文檔.
rel="alternate stylesheet"屬性將其作爲備用樣式表而在默認情況下禁用它
通過js拿到link標籤對象,disabled屬性設置,可以實現變化頁面導入樣式表
disabled = true;表示它不會立即生效
disabled = false;表示立即生效
5.E > + ~ F
六、子元素選擇器(E>F)
子元素選擇器只能選擇某元素的子元素，其中E爲父元素，而F爲子元素，其中E>F所表示的是選擇了Ｅ元素下的所有子元素Ｆ。這和後代選擇器（Ｅ Ｆ）不一樣，在後代選擇器中Ｆ是Ｅ的後代元素，而子元素選擇器Ｅ > F，其中Ｆ僅僅是Ｅ的子元素而以。
ul > li {background: green;color: yellow;} 上在代碼表示選擇ul下的所有子元素li。如：
IE6不支持子元素選擇器。
七、相鄰兄弟元素選擇器(E + F)
相鄰兄弟選擇器可以選擇緊接在另一元素後的元素，而且他們具有一個相同的父元素，換句話說，EF兩元素具有一個相同的父元素，而且Ｆ元素在Ｅ元素後面，而且相鄰，這樣我們就可以使用相鄰兄弟元素選擇器來選擇Ｆ元素。
li + li {background: green;color: yellow; border: 1px solid #ccc;} 上面代碼表示選擇li的相鄰元素li，我們這裏一共有十個li，那麼上面的代碼選擇了從第2個li到 10 個li，一共九個，請看效果：
因爲上面的li+li其中第二li是第一li的相鄰元素，第三個又是第二個相鄰元素，因此第三個也被選擇，依此類推，所以後面九個li都被選中了，如果我們換過一種方式來看，可能會更好的理解一點：
.active + li {background: green;color: yellow; border: 1px solid #ccc;} 按照前面所講的知識，這句代碼很明顯選擇了li.active後面相鄰的li元素，注意了和li.active後面相鄰的元素僅只有一個的。如圖：
IE6不支持這個選擇器
八、通用兄弟選擇器（Ｅ ～ Ｆ）
通用兄弟元素選擇器是CSS3新增加一種選擇器，這種選擇器將選擇某元素後面的所有兄弟元素，他們也和相鄰兄弟元素類似，需要在同一個父元素之中，換句話說，E和F元素是屬於同一父元素之內，並且F元素在Ｅ元素之後，那麼E ~ F 選擇器將選擇中所有Ｅ元素後面的Ｆ元素。比如下面的代碼：
.active ~ li {background: green;color: yellow; border: 1px solid #ccc;} 上面的代碼所表示的是，選擇中了li.active 元素後面的所有兄弟元素li,如圖所示：
通用兄弟選擇器和相鄰兄弟選擇器極其相似，只不過，相鄰兄弟選擇器僅選擇是元素的僅與其相鄰的後面元素（選中的僅一個元素）；而通用兄弟元素選擇器，選中的是元素相鄰的後面兄弟元素，這樣說起來可能會有迷糊，大家可以仔細看看其相鄰兄弟的效果圖。
6. 屬性選擇器
[attribute] 用於選取帶有指定屬性的元素。
[attribute=value]用於選取帶有指定屬性和值的元素。
[attribute~=value]用於選取屬性值中包含指定詞彙的元素。
[attribute|=value]用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]匹配屬性值以指定值開頭的每個元素。
[attribute$=value]匹配屬性值以指定值結尾的每個元素。
[attribute*=value]匹配屬性值中包含指定值的每個元素。
7. 僞類選擇器
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */和前面一樣，在開始之前先創建一個Dom:
<div class="demo clearfix"> <ul class="clearfix"> <li class="first links odd" id="first"><a href="">1</a></li> <li class="links even"><a href="">2</a></li> <li class="links odd"><a href="">3</a></li> <li class="links even"><a href="">4</a></li> <li class="links odd"><a href="">5</a></li> <li class="links even"><a href="">6</a></li> <li class="links odd"><a href="">7</a></li> <li class="links even"><a href="">8</a></li> <li class="links odd"><a href="">9</a></li> <li class="links even last" id="last"><a href="">10</a></li></ul></div>
同樣先加上一些樣式，讓他看起來好看一點
.demo { width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.demo li { border: 1px solid #ccc;
padding: 2px;
float: left;
margin-right:4px;
}
.demo a { float: left;
display: block;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
text-decoration: none;
} 最出效果：
CSS的僞類語法和別的語法有點不一樣，其主要有兩種語法表達方式
E:pseudo-class {property:value}/*其中E爲元素;pseudo-class爲僞類名稱;property是css的屬性;value爲css的屬性值*/ 示例：
a:link {color:red;} 第二種寫法
E.class:pseudo-class{property:value} 如：
a.selected:hover {color: blue;} 下面開始我們一起來看看這些僞類的具體應用：
一、動態僞類
動態僞類，因爲這些僞類並不存在於HTML中,而只有當用戶和網站交互的時候才能體現出來，動態僞類包含兩種，第一種是我們在鏈接中常看到的錨點僞類，如":link",":visited";另外一種被稱作用戶行爲僞類，如“:hover”,":active"和":focus"。先來看最常見的錨點僞類
.demo a:link {color:gray;}/*鏈接沒有被訪問時前景色爲灰色*/
.demo a:visited{color:yellow;}/*鏈接被訪問過後前景色爲****/
.demo a:hover{color:green;}/*鼠標懸浮在鏈接上時前景色爲綠色*/
.demo a:active{color:blue;}/*鼠標點中激活鏈接那一下前景色爲藍色*/ 對於這四個錨點僞類的設置，有一點需要特別注意，那就是他們的先後順序，要讓他們遵守一個愛恨原則LoVe/HAte,也就是Link--visited--hover--active。如果你把順序搞錯了會給你帶來意想不到的錯誤，大家對於這個應該很熟悉的，如果是初學的朋友，可以私下練習一下。其中:hover和:active又同時被列入到用戶行爲僞類中，他們所表達的意思是：
:hover用於當用戶把鼠標移動到元素上面時的效果；
:active用於用戶點擊元素那一下的效果（正發生在點的那一下，鬆開鼠標左鍵此動作也就完成了）
:focus用於元素成爲焦點，這個經常用在表單元素上。
本站的button就採用了這幾處效果：
.form-submit { -moz-transition: border-color 0.218s ease 0s;
-webkit-transition: border-color 0.218s ease 0s;
-o-transition: border-color 0.218s ease 0s;
-ms-transition: border-color 0.218s ease 0s;
transition: border-color 0.218s ease 0s;
background: none repeat scroll 0 0 #F5F5F5;
border: 1px solid #DCDCDC;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
color: #333333;
font: 11px/27px arial,sans-serif;
height: 27px;
padding: 0 8px;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.form-submit:hover { background-color: #F8F8F8;
border-color: #C6C6C6;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
color: #333333;
}
.form-submit:active { border-color: #4D90FE;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
color: #000000;
}
.form-submit:focus { border: 1px solid #4D90FE !important;
} 你可以點擊這裏體驗一下這種效果。
對於:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。
二、UI元素狀態僞類
我們把":enabled",":disabled",":checked"僞類稱爲UI元素狀態僞類，這些主要是針對於HTML中的Form元素操作，最常見的比如我們"type="text"有enable和disabled兩種狀態，前者爲可寫狀態後者爲不可狀態；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態。來看兩個實例，比如說你想將"disabled"的文本框與別的文本框區別出來，你就可以這樣應用
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;} 這樣一來就把頁面中禁用的文本框應用了一個不同的樣式。那麼對於其他幾個用法是一樣的，這裏就不在講述。IE6-8不支持":checked",":enabled",":disabled"這三種選擇器。
三、CSS3的:nth選擇器
這節內容纔是關鍵，也是CSS3選擇器最新部分，有人也稱這種選擇器爲CSS3結構類，下面我們通過實際的應用來具體瞭解他們的使用和區別，首先列出他具有的選擇方法：
:first-child選擇某個元素的第一個子元素；
:last-child選擇某個元素的最後一個子元素；
:nth-child()選擇某個元素的一個或多個特定的子元素；
:nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；
:nth-of-type()選擇指定的元素；
:nth-last-of-type()選擇指定的元素，從元素的最後一個開始計算；
:first-of-type選擇一個上級元素下的第一個同類子元素；
:last-of-type選擇一個上級元素的最後一個同類子元素；
:only-child選擇的元素是它的父元素的唯一一個了元素；
:only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
:empty選擇的元素裏面沒有任何內容。
下面我們針對上面所列的各種選擇器，一個一個來介紹：
1、:first-child
:first-child是用來選擇某個元素的第一個子元素，比如我們這裏的這個demo，你想讓列表中的"1"具有與從不同的樣式，我們就可以使用:first-child來實現：
.demo li:first-child {background: green; border: 1px dotted blue;} 在沒有這個選擇器出現之前，我們都需在要第一個li上加上一個不同的class名，比如說“first”，然後在給他應用不同的樣式
.demo li.first {background: green; border: 1px dotted blue;} 其實這兩種最終效果是一樣的，只是後面這種，我們需要在html增加一個額外的class名，請看效果：
IE6不支持:first-child選擇器。
2、:last-child
:last-child選擇器與:first-child選擇器的作用類似，不同的是":last-child"選擇是的元素的最後一個子元素。比如說，我們需要單獨給列表最後一項一個不同的樣式，我們就可以使用這個選擇器，如：
.demo li:last-child {background: green; border: 2px dotted blue;} 這個效果和以前在列表上的“last”的class是一樣的
.demo li.last {background: green; border: 2px dotted blue;} 他們效顯示的效果都是一致的，如圖所示；
3、:nth-child()
:nth-child()可以選擇某個的一個或多個特定的子元素，你可以按這種方式進行選擇：
:nth-child(length);/*參數是具體數字*/ :nth-child(n);/*參數是n,n從0開始計算*/ :nth-child(n*length)/*n的倍數選擇，n從0開始算*/ :nth-child(n+length);/*選擇大於length後面的元素*/ :nth-child(-n+length)/*選擇小於length前面的元素*/ :nth-child(n*length+1);/*表示隔幾選一*/ //上面length爲整數
:nth-child()可以定義他的值（值可以是整數，也可以是表達式），如上面所示，用來選擇特定的子元素，對於這個我們直接看實例，比我說的更好理解。
:nth-child(3),選擇某元素下的第三個子元素，（這裏的3可以是你自己需要的數字），比如說，我需要選擇列表中的第三個li元素，那麼我們可以直接這樣使用：
.demo li:nth-child(3) {background: lime;} 效果如下所示：
這種不式不能引用負值，也就是說li:nth-child(-3)是不正確的使用方法。
:nth-child(n)，其中n是一個簡單的表達式，那麼"n"取值是從“0”開始計算的，到什麼時候結束我也不知道，如果你在實際應用中直接這樣使用的話，將會選中所有子元素，比如說，在我們的demo中，你在li中使用":nth-child(n)",那麼將選中所有的"li",如：
.demo li:nth-child(n) {background: lime;}
等於 .demo li {background: lime;} 他其實是這樣計算的
n=0 －－》 沒有選擇元素 n=1 －－》 選擇第一個li, n=2 －－》 選擇第二個li,後在的依此類推，這樣下來就選中了所有的li
請看效果：
請注意了，這裏的“n”只能是"n"，不能使用其他字母代替，不然會沒有任何效果的。
:nth-child(2n),這中方式是前一種的變身，我們可以選擇n的2倍數，當然其中“2”可以換成你自己需要的數字，如：
.demo li:nth-child(2n) {background: lime;}
等於 .demo li:nth-child(even) {background: lime;} 我們來看一下其計算的過程：
n=0 －－》 2n=0 －－》 沒有選中任何元素， n=1 －－》 2n=2 －－》 選擇了第二個li n=2 －－》 2n＝4 －－》 選擇了第四個li，後面的依此類推
如果是“2n”這樣跟我們以使用"even"命名class定義樣式，所起到的效果是一樣的，如圖所示：
“:nth-child(2n)”也等於":nth-child(even)"效果。
:nth-child(2n-1),這個選擇器是在":nth-child(2n)"基礎上演變過來的，上面說了人是選擇偶數，那麼我們在他的基礎上減去“1”就變成奇數選擇，如：
.demo li:nth-child(2n-1) {background: lime;} 我們來看看其實現過程
n=0 －－》 2n-1=-1 －－》 也沒有選中任何元素， n=1 －－》 2n-1=1 －－》 選擇第一個li n=2 －－》 2n-1=3 －－》 選擇第三個li,後面的依此類推
其實實現這種奇數效果，我們還可以使用":nth-child(2n+1)"和":nth-child(odd)",一起來看他們的效果
:nth-child(n+5)這個選擇器是選擇從第五個元素開始選擇，這裏的數字你可以自己定義，如：
.demo li:nth-child(n+5) {background: lime;} 按前面的計算方法，我們來看看，
n=0 －－》 n+5=5 －－》 選中第5個li n=1 －－》 n+5=6 －－》 選擇第6個li，後面的就不列出來了，原理一樣
你可以使用這種方法選擇你需要開始選擇的元素位置，也就是說換了數字，起始位置就變了，看下在的效果圖：
:nth-child(-n+5)這種選擇器剛好和上面的選擇器相反，這個是選擇第5個前面的，如：
.demo li:nth-child(-n+5) {background: lime;} 如果不清楚怎麼一回事，你只要計算一下就明白了
n=0 －－》 -n+5=5 －－》 選擇了第5個li n=1 －－》 -n+5=4 －－》 選擇了第4個li n=2 －－》 -n+5=3 －－》 選擇了第3個li n=3 －－》 -n+5=2 －－》 選擇了第2個li n=4 －－》 -n+5=1 －－》 選擇了第1個li n=5 －－》 -n+5=0 －－》 沒有選擇任何元素
從上面的計算方法中，大家很清楚的知道是怎麼得來的，最後我們一起看看效果吧：
:nth-child(4n+1)這種方法是實現隔幾選一的效果，比如我們這裏是隔三選一，如果你把"4"換成別的數字那就是另外的一種隔法了，比如這個實例
.demo li:nth-child(4n+1) {background: lime;} 我們主要來看其計算出來的結果
n=0 －－》4n+1=1 －－》選擇了第一個li n=1 －－》4n+1=5 －－》選擇了第五個li n=2 －－》4n+1=9 －－》選擇了第九個li
效果如下
IE6-8和FF3-瀏覽器不支持":nth-child"選擇器。
4、:nth-last-child()
":nth-last-child()"選擇器和前面的":nth-child()"很相似，只是這裏多了一個last，所以他起的作用就和前面的":nth-child"不一樣了，他只要是從最後一個元素開始算，來選擇特定元素。我們來看幾個實例：
.demo li:nth-last-child(4) {background: lime;} 上面代碼表示選擇倒數第四個列表項，效果如下：
其中":nth-last-child(1)"和":last-child"所起作用是一樣的，都表示的是選擇最後一個元素。
另外":nth-last-child()"也可以像“:nth-child()”一樣，可以使用表達式來選擇特定元素，下面我們來看幾個特殊的表達式所起的作用
:nth-last-child(2n),這個表示的是從元素後面計算，選擇的是偶數個數，從而反過來說就是選擇元素的奇數，和前面的":nth-child(2n+1)",":nth-child(2n-1)",":nth-child(odd)"所起的作用是一樣的。如：
.demo li:nth-last-child(2n) {background: lime;}
.demo li:nth-last-child(even) {background: lime;}
等於 .demo li:nth-child(2n+1) {background: lime;}
.demo li:nth-child(2n-1) {background: lime;}
.demo li:nth-child(odd) {background: lime;} 請看效果：
:nth-last-child(2n-1)這個選擇器剛好跟上面的相反，從後面計算選擇的是奇數，而從前面計算選擇的就是偶數位了，這個前面的":nth-child(2n)"之類是相同的效果，如：
.demo li:nth-last-child(2n+1) {background: lime;}
.demo li:nth-last-child(2n-1) {background: lime;}
.demo li:nth-last-child(odd) {background: lime;}
等於： .demo li:nth-child(2n) {background: lime;}
.demo li:nth-child(even) {background: lime;} 效果如下
看了這幾個實例，大家都知道":nth-last-child()"和"nth-child()"使用方法是一樣的，只不過他們的區別是“:nth-child()”是從元素的第一個開始計算，而“:nth-last-child()”是從元素的最後一個開始計算，他們的計算方法都是一樣的。同樣在IE6-8和FF3.0-瀏覽器不支持“:nth-last-child()”選擇器。
5、:nth-of-type
:nth-of-type類似於:nth-child，不同的是他只計算選擇器中指定的那個元素,其實我們前面的實例都是指定了具體的元素，這個選擇器主要對用來定位元素中包含了好多不同類型的元素是很有用處，比如說，我們div.demo下有好多p元素，li元素，img元素等，但我只需要選擇p元素，並讓他每隔一個p元素就有不同的樣式，那我們就可以簡單的寫成：
.demo p:nth-of-type(even) {background-color: lime;} 其實這種使用和:nth-child使用是一樣的，也可以使用:nth-child的那些表達式和使用方法，唯一不同的是這種指定了元素的類型而以。同樣在IE6-8和FF3.0-瀏覽器不支持這種選擇器
6、:nth-last-of-type
這個選擇器不用說大家都能想得到了，他和前面的:nth-last-child一樣使用，只是他指一了元素的類型而以。
同樣在IE6-8和FF3.0-瀏覽器不支持這種選擇器
7、:first-of-type和:last-of-type
:first-of-type和:last-of-type這兩個選擇器就類似於:first-child和:last-child;不同之處就是指定了元素的類型。
:nth-of-type,:nth-last-of-type;:first-of-type和:last-of-type實際意義並不是很大，我們前面講的:nth-child之類選擇器就能達到這此功能，不過大家要是感興趣還是可以瞭解一下，個人認爲實用價值並不是很大。此類說法僅供參考。
8、:only-child和:only-of-type
":only-child"表示的是一個元素是它的父元素的唯一一個子元素。我們一起來看一個實例更好理解
<div class="post"> <p>Lorem ipsum dolor sit amet, consectetur</p> <p>Lorem ipsum dolor sit amet, consectetur</p> </div> <div class="post"> <p>Lorem ipsum dolor sit amet, consectetur</p> </div>
css樣式
.demo .post p {background: lime;} 初步效果
如果我需要在div.post只有一個p元素的時候，改變這個p的樣式，那麼我們現在就可以使用:only-child,如：
.demo .post p {background: lime;}
.demo .post p:only-child {background: red;} 此時只有div.post只有一個子元素p時，那麼他的背景色將會改變,如圖所示：
:only-of-type是表示一個元素他有很多個子元素，而其中只有一個子元素是唯一的，那麼我們使用這種選擇方法就可以選擇中這個唯一的子元素，比如說
<div class="post"> <div>Lorem ipsum dolor sit amet, consectetur</div> <p>Lorem ipsum dolor sit amet, consectetur</p> <div>Lorem ipsum dolor sit amet, consectetur</div> </div>
如果我們想只選擇中上面中的p元素，我們就可以這樣寫，
p:only-of-type{background-color:red;} IE6-8瀏覽器不支持:only-child選擇器；IE6-8和FF3.0-瀏覽器不支持:only-of-type選擇器。
9、:empty
:empty是用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格，比如說，你有三個段落，其中一個段落什麼都沒有，完全是空的，你想這個p不顯示，那你就可這樣來寫：
p:empty {display: none;} IE6-8瀏覽器不支持:empty選擇器
三、否定選擇器（:not）
否定選擇器和jq中的:not選擇器一模一樣，就拿form中的元素來說明這個選擇器的用法，比如你想對form中所有input加邊框，但又不想submit也起變化，此時就可以使用:not爲實現
input:not([type="submit"]) {border: 1px solid red;} 否定選擇器 :not()，可以讓你定位不匹配該選擇器的元素。IE6-8瀏覽器不支持:not()選擇器
四、僞元素
CSS中的僞元素大家以前看過：:first-line,:first-letter,:before,:after;那麼在CSS3中，他對僞元素進行了一定的調整，在以前的基礎上增加了一個“：”也就是現在變成了“::first-letter,::first-line,::before,::after”另外他還增加了一個“::selection”,兩個“：：”和一個“：”css3中主要用來區分僞類和僞元素，到目前來說，這兩種方式都是被接受的，也就是說不管使用哪種寫法所起的作用都是一樣的，只是一個書寫格式不同而以。
那麼我們簡單瞭解一下他們的作用
::first-line選擇元素的第一行，比如說改變每個段落的第一行文本的樣式，我們就可以使用這個
p::first-line {font-weight:bold;} ::first-letter選擇文本塊的第一個字母，除非在同一行裏面包含一些其它元素，不過這個主要運用於段落排版上多，比如說首字下沉，
p::first-letter {font-size: 56px;float:left;margin-right:3px;} ::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常用"content"配合使用，見過最多的就是清除浮動，
.clearfix:before, .clearfix:after { content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} 當然可以利用他們製作出其他更好的效果，比如本站首面的那個三角紙張效果，也是通過這個來實現的。
::selection用來改變瀏覽網頁選中文的默認效果，有關於“::selection”使用，大家可以點擊《CSS ::Selection》。
ele:nth-of-type(n)是指父元素下第n個ele元素， 而ele:nth-child(n)是指父元素下第n個元素且這個元素爲ele，若不是，則選擇失敗。
<div> <ul class="demo"> <p>zero</p> <li>one</li> <li>two</li> </ul> </div>
.demo li:nth-child(2)選擇的是<li>one</li>節點，而.demo li:nth-of-type(2)則選擇的是<li>two</li>節點。
::after ::before 不改變DOM內容，是在渲染過程中加入的。
一 基本語法
在瞭解進階的應用之前，先來了解一下語法規則。平常僅僅需要將這兩個僞元素用於添加一些自定義字符時，只需使用僞類使用的單冒號寫法，以保證瀏覽器的兼容性：
Html代碼 
p:before {}
不過，在 CSS3 中爲了區別僞元素和僞類爲僞元素使用了雙冒號，因此如果使用了 display 或者 width 等屬性時使得顯示脫離了原本元素後，建議按照標準雙寫。過於老的瀏覽器可能會存在支持問題，不過僞元素大多是配合 CSS3 使用，就無所謂向下兼容了：
Html代碼
img::after {}
這兩個僞類下特有的屬性 content ，用於在 CSS 渲染中向元素邏輯上的頭部或尾部添加內容。注意這些添加不會改變文檔內容，不會出現在 DOM 中，不可複製，僅僅是在 CSS 渲染層加入。比較有用的是以下幾個值：
[String] - 使用引號包括一段字符串，將會向元素內容中添加字符串。示例：
Html代碼
![收藏代碼]()
a:after { content: "↗"; }
attr() – 調用當前元素的屬性，可以方便的比如將圖片的 Alt 提示文字或者鏈接的 Href 地址顯示出來。示例：Html代碼
a:after { content:"(" attr(href) ")"; }
url() / uri() – 用於引用媒體文件。示例：Html代碼
h1::before { content: url(logo.png); }
counter() – 調用計數器，可以不使用列表元素實現序號功能。具體請參見 counter-increment 和 counter-reset 屬性的用法。示例：Html代碼
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
二 進階技巧
清除浮動是一個時常會遇到的問題，不少人的解決辦法是添加一個空的 div 應用 clear:both; 屬性。現在，無需增加沒有意義的元素，僅需要以下樣式即可在元素尾部自動清除浮動：
Html代碼
.clear-fix { *zoom: 1; } //對IE6，7
.clear-fix:after { display: table; content: ""; clear: both; }
content要存在，否則這個元素不會產生
display:table 使元素充滿整行，不受浮動影響，因爲
1塊元素自動佔滿一行，行元素內容撐開寬高
clear:both 進一步加強
<style>
#outter{
border:2px solid black;
}
#inner1,#inner2{
border:2px solid pink;
float:left;
}
#inner3{
display:table;
}
#inner4{
clear:both;
}
</style>
</head>
<body>
<div id="outter">
<div id="inner1">div1</div>
<div id="inner2">div2</div>
<!--方法1：<table>1</table>-->
<!--方法2：<div id="inner3">1</div>-->
<!--table裏要有內容，否則無法清除浮動-->
<!--方法3<div id="inner4"></div>-->
</div>
</body>8. 盒子模型
塊級盒子：margin,padding，width,height
行內盒子：忽略width,height,margin-top,margin-bottom
padding不會推動上下的元素(像塊級盒子)，而是重疊
9.viewport
ViewPort <meta>標記用於指定用戶是否可以縮放Web頁面，如果可以，那麼縮放到的最大和最小縮放比例是什麼。使用ViewPort <meta>標記還表示文檔針對移動設備進行了優化。ViewPort <meta>標記的content值是由指令及其值組成的以逗號分隔的列表。
例：
<meta name=”viewport” content=”width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimun-scale=1.0”>
width和height指令分別指定視區的邏輯寬度和高度。他們的值要麼是以像素爲單位的數字，要麼是一個特殊的標記符號。width指令使用device-width標記可以指示視區寬度應爲設備的屏幕寬度。類似地height指令使用device-height標記指示視區高度爲設備的屏幕高度。
user-scalable指令指定用戶是否可以縮放視區，即縮放Web頁面的視圖。值爲yes時允許用戶進行縮放，值爲no時不允許縮放。
initial-scale指令用於設置Web頁面的初始縮放比例。默認的初始縮放比例值因智能手機瀏覽器的不同而有所差異。通常情況下設備會在瀏覽器中呈現出整個Web頁面，設爲1.0則將顯示未經縮放的Web文檔。
maximum-scale和minimum-scale指令用於設置用戶對Web頁面縮放比例的限制。值的範圍爲0.25至10.0之間。與initial-scale相同，這些指令的值是應用於視區內容的縮放比例。
所有智能手機瀏覽器都支持ViewPort <meta>標記的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令，而是主張用戶應始終保留在移動瀏覽器中縮放Web頁面的能力。
/*
10.media
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
轉換成css中的寫法爲：
@media screen and (max-width: 600px) {
選擇器 { 屬性：屬性值；
}
}一、最大寬度Max Width
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
上面表示的是：當屏幕小於或等於600px時，將採用small.css樣式來渲染Web頁面。
二、最小寬度Min Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
上面表示的是：當屏幕大於或等於900px時，將採用big.css樣式來渲染Web頁面。
三、多個Media Queries使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
Media Query可以結合多個媒體查詢，換句話說，一個Media Query可以包含0到多個表達式，表達式又可以包含0到多個關鍵字，以及一種Media Type。正如上面的其表示的是當屏幕在600px-900px之間時採用style.css樣式來渲染web頁面。
四、設備屏幕的輸出寬度Device Width
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
上面的代碼指的是iphone.css樣式適用於最大設備寬度爲480px，比如說iPhone上的顯示，這裏的max-device-width所指的是設備的實際分辨率，也就是指可視面積分辨率