以下是正文。
CSS3介紹
CSS3在CSS2基礎上，增強或新增了許多特性， 彌補了CSS2的眾多不足之處，使得Web開發變得更為高效和便捷。
CSS3的現狀
-
瀏覽器支持程度不夠好，有些需要添加私有前綴
-
移動端支持優於PC端
-
不斷改進中
-
應用相對廣泛
應對的策略：漸進增強
- （1）堅持漸進增強的原則：讓低版本瀏覽器能正常訪問頁面，高版本的瀏覽器用戶體驗更好。【重要】
比如說，同樣是一個頭像，可能在低版本的瀏覽器中，頭像方的；在高版本的瀏覽器中，頭像是圓的。
-
（2）考慮用戶群體。
-
（3）遵照產品的方案。
參考鏈接：
瀏覽器的版本問題
由於CSS3普遍存在兼容性問題，為了避免因兼容性帶來的干擾，瀏覽器的建議版本為：
-
Chrome瀏覽器 version 46+
-
Firefox瀏覽器 firefox 42+
如何使用手冊
CSS參考手冊的網址：http://css.doyoe.com/
CSS參考手冊的下載鏈接：http://download.csdn.net/download/smyhvae/10243974
在查看CSS參考手冊時，需要注意以下符號：
比如說，{1,4}表示可以設置一至四個參數。
下面講CSS3的基礎知識。本文講一下 CSS3 選擇器的內容。
CSS3 選擇器
我們之前學過 CSS 的選擇器，比如：
div{} 標簽選擇器
.box 類名選擇器
#box id選擇器
div p 后代選擇器
div.box 交集選擇器
div,p,span 並集選擇器
div>p 子代
* : 通配符
div+p: 選中div后面相鄰的第一個p
div~p: 選中的div后面所有的p
CSS3新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精准度。CSS3選擇器與 jQuery 中所提供的絕大部分選擇器兼容。
屬性選擇器
屬性選擇器的標志性符號是 []。
匹配含義：
^：開頭 $：結尾 *：包含
格式：
-
E[title]選中頁面的E元素，並且E存在 title 屬性即可。 -
E[title="abc"]選中頁面的E元素，並且E需要帶有title屬性，且屬性值完全等於abc。 -
E[attr~=val]選擇具有 att 屬性且屬性值為：用空格分隔的字詞列表，其中一個等於 val 的E元素。 -
E[attr|=val]表示要么是一個單獨的屬性值，要么這個屬性值是以“-”分隔的。 -
E[title^="abc"]選中頁面的E元素，並且E需要帶有 title 屬性,屬性值以 abc 開頭。 -
E[title$="abc"]選中頁面的E元素，並且E需要帶有 title 屬性,屬性值以 abc 結尾。 -
E[title*="abc"]選中頁面的E元素，並且E需要帶有 title 屬性,屬性值任意位置包含abc。
比如說，我們用屬性選擇器去匹配標簽的className，是非常方便的。
這里我們用class屬性來舉例。代碼舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器 - 屬性</title>
<style>
body {
margin: 0;
padding: 0;
font-family: '微軟雅黑';
background-color: #F7F7F7;
}
.wrapper {
width: 1024px;
margin: 0 auto;
}
.wrapper > section {
min-height: 300px;
margin-bottom: 30px;
box-shadow: 1px 1px 4px #DDD;
background-color: #FFF;
}
.wrapper > header {
text-align: center;
line-height: 1;
padding: 20px;
margin-bottom: 10px;
font-size: 30px;
}
.wrapper section > header {
line-height: 1;
padding: 10px;
font-size: 22px;
color: #333;
background-color: #EEE;
}
.wrapper .wrap-box {
padding: 20px;
}
form {
width: 300px;
height: 300px;
margin: 0 auto;
}
form input[type="text"] {
width: 200px;
height: 30px;
}
form input[type="password"] {
width: 200px;
height: 30px;
}
.attr1 {
}
.download {
}
.attr1 a[href="./a.rmvb"] {
color: red;
}
.attr1 a[href="./b.rmvb"] {
color: pink;
}
/* E[attr~=val] 表示的一個單獨的屬性值 這個屬性值是以空格分隔的*/
.attr2 a[class~="download"] {
color: red;
}
/* E[attr|=val] 表示的要么一個單獨的屬性值 要么這個屬性值是以"-"分隔的*/
.attr3 a[class|="download"] {
color: red;
}
/* E[attr*=val] 表示的屬性值里包含val字符並且在“任意”位置 */
.attr4 a[class*="download"] {
color: red;
}
/* E[attr^=val] 表示的屬性值里包含val字符並且在“開始”位置 */
.attr5 a[class^="download"] {
color: red;
}
/* E[attr$=val] 表示的屬性值里包含val字符並且在“結束”位置 */
.attr6 a[class$="download"] {
color: red;
}
</style>
</head>
<body>
<div class="wrapper">
<header>CSS3-屬性選擇器</header>
<section>
<header>簡介</header>
<div class="wrap-box">
<form action="">
<ul>
<li>
姓名: <input type="text">
</li>
<li>
密碼: <input type="password">
</li>
<li>
性別: <input type="radio">男
<input type="radio"> 女
</li>
<li>
興趣: <input type="checkbox" name="" id="">寫代碼
</li>
<li>
<input type="submit" value="提交">
</li>
</ul>
</form>
</div>
</section>
<section class="attr1">
<header>E[attr]</header>
<div class="wrap-box">
<a href="./a.rmvb" class="download download-movie">下載</a>
<a href="./b.rmvb" class="download download-movie">下載</a>
<a href="./a.mp3" class="download download-music">下載</a>
</div>
</section>
<section class="attr2">
<header>E[attr~=attr]</header>
<div class="wrap-box">
<a href="./a.rmvb" class="download download-movie">下載</a>
<a href="./b.rmvb" class="download download-movie">下載</a>
<a href="./a.mp3" class="download download-music">下載</a>
</div>
</section>
<section class="attr3">
<header>E[attr|=attr]</header>
<div class="wrap-box">
<a href="./a.rmvb" class="download">下載</a>
<a href="./b.rmvb" class="download-movie">下載</a>
<a href="./a.mp3" class="download-music">下載</a>
</div>
</section>
<section class="attr4">
<header>E[attr*=val]</header>
<div class="wrap-box">
<a href="./a.rmvb" class="download">下載</a>
<a href="./b.rmvb" class="moviedownload">下載</a>
<a href="./a.mp3" class="downloadmusic">下載</a>
</div>
</section>
<section class="attr5">
<header>E[attr^=val]</header>
<div class="wrap-box">
<a href="./a.rmvb" class="download">下載</a>
<a href="./b.rmvb" class="moviedownload">下載</a>
<a href="./a.mp3" class="downloadmusic">下載</a>
</div>
</section>
<section class="attr6">
<header>E[attr$=val]</header>
<div class="wrap-box">
<a href="./a.rmvb" class="download">下載</a>
<a href="./b.rmvb" class="moviedownload">下載</a>
<a href="./a.mp3" class="downloadmusic">下載</a>
</div>
</section>
</div>
</body>
</html>
最后來張表格：
結構偽類選擇器
偽類選擇器的標志性符號是 :。
CSS中有一些偽類選擇器，比如:link、:active、:visited、:hover，這些是動態偽類選擇器。
CSS3又新增了其它的偽類選擇器。這一小段，我們來學習CSS3中的結構偽類選擇器：即通過結構來進行篩選。
1、格式：（第一部分）
-
E:first-child匹配父元素的第一個子元素E。 -
E:last-child匹配父元素的最后一個子元素E。 -
E:nth-child(n)匹配父元素的第n個子元素E。注意，盒子的編號是從1開始算起，不是從0開始算起。 -
E:nth-child(odd)匹配奇數 -
E:nth-child(even)匹配偶數 -
E:nth-last-child(n)匹配父元素的倒數第n個子元素E。
理解：
（1）這里我們要好好理解父元素的含義，它指的是：以 E 元素的父元素為參考。
（2）注意：以上選擇器中所選到的元素的類型，必須是指定的類型E，如果選不中，則無效。這個要好好理解，具體可以看CSS參考手冊中的E:nth-child(n)的示例。我們可以理解成：先根據選擇器找到選中的全部位置，如果發現某個位置不是類型E，則該位置失效。
（3）另外，E:nth-child(n)這個屬性也很有意思。比如，針對下面這樣一組標簽：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
上方代碼中：
-
如果選擇器寫成
li:nth-child(2)，則表示第2個li。 -
如果選擇器寫成
li:nth-child(n)，則表示所有的li。因為此時的n表示 0,1,2,3,4,5,6,7,8.....（當n小於1時無效，因為n = 0 也是不會選中的） -
如果選擇器寫成
li:nth-child(2n)，則表示所有的第偶數個 li。 -
如果選擇器寫成
li:nth-child(2n+1)，則表示所有的第奇數個 li。 -
如果選擇器寫成
li:nth-child(-n+5)，則表示前5個 li。 -
如果選擇器寫成
li:nth-last-child(-n+5)，則表示最后5個 li。 -
如果選擇器寫成
li:nth-child(7n)，則表示選中7的倍數。。
上面列舉的選擇器中，我們只要記住： n 表示 0,1,2,3,4,5,6,7,8.....就很容易明白了。
2、格式：（第二部分）
-
E:first-of-type匹配同類型中的第一個同級兄弟元素E。 -
E:last-of-type匹配同類型中的最后一個同級兄弟元素E。 -
E:nth-of-type(n)匹配同類型中的第n個同級兄弟元素E。 -
E:nth-last-of-type(n)匹配同類型中的倒數第n個同級兄弟元素E。
既然上面這幾個選擇器帶有type，我們可以這樣理解：先在同級里找到所有的E類型，然后根據 n 進行匹配。
3、格式：（第三部分）
-
E:empty匹配沒有任何子節點（包括空格等text節點）的元素E。 -
E:target匹配相關URL指向的E元素。要配合錨點使用。
舉例：
我們可以把多個偽類選擇器結合起來使用，比如：
如果想把上圖中，第一行的前三個 span 標紅，我們可以這樣使用結構偽類選擇器：
dt:first-child span:nth-of-type(-n+3) {
color: red;
}
最后來張表格：
偽元素選擇器
偽元素選擇器的標志性符號是 ::。
1、格式：（第一部分）
-
E::before設置在 元素E 前面（依據對象樹的邏輯結構）的內容，配合content屬性一起使用。 -
E::after設置在 元素E 后面（依據對象樹的邏輯結構）的內容，配合content屬性一起使用。
E:after、E:before 在舊版本里是偽類，在 CSS3 這個新版本里是偽元素。新版本里，E:after、E:before會被自動識別為E::after、E::before，按偽元素來對待，這樣做的目的是用來做兼容處理。
舉例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*::before 和::after 是通過 css 模擬出的html標簽的效果*/
span::before{
content:"smyhvae";
color:red;
background-color: pink;
width: 50px;
height: 50px;
display: inline-block;
}
span::after{
content:"永不止步";
color:yellowgreen;
}
/*給原本的span標簽設置一個默認的屬性*/
span{
border: 1px solid #000;
}
</style>
</head>
<body>
<span>生命壹號</span>
</body>
</html>
效果如下：
上圖可以看出：
-
通過偽元素選擇器，就可以添加出類似於span標簽的效果（記得要結合 content 屬性使用）。
-
通過這兩個屬性添加的偽元素，是行內元素，需要轉換成塊元素才能設置寬高。
2、格式：（第二部分）
-
E::first-letter設置元素 E 里面的第一個字符的樣式。 -
E::first-line設置元素 E 里面的第一行的樣式。 -
E::selection設置元素 E 里面被鼠標選中的區域的樣式（一般設置顏色和背景色）。
E::first-letter 的舉例：
E::first-line的舉例：
最后來張表格：
我的公眾號
想學習代碼之外的軟技能？不妨關注我的微信公眾號：生命團隊（id：vitateam）。
掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：
