從零開始學 Web 之 CSS3（一）CSS3概述，選擇器
大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公眾號：Web前端之巔
- 博客園：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
一、CSS3
1、CSS3簡介
CSS3是CSS（層疊樣式表）技術的升級版本，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
2、新增特性
CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定制字體、多背景圖、文字或圖像的變形處理（旋轉、縮放、傾斜、移動）、多欄布局、媒體查詢等。
3、優勢
減少開發成本與維護成本
在CSS3出現之前，開發人員為了實現一個圓角效果，往往需要添加額外的HTML標簽，使用一個或多個圖片來完成，而使用CSS3只需要一個標簽，利用CSS3中的border-radius屬性就能完成。
提高頁面性能
很多CSS3技術通過提供相同的視覺效果而成為圖片的“替代品”，換句話說，在進行Web開發時，減少多余的標簽嵌套以及圖片的使用數量，意味著用戶要下載的內容將會更少，頁面加載也會更快。
4、兼容問題
瀏覽器對於CSS3的支持程度比較低，有的時候不同的瀏覽器需要添加不同的前綴。
Chrome（谷歌瀏覽器）：-webkit-
Safari（蘋果瀏覽器）：-webkit-
Firefox（火狐瀏覽器）：-moz-
lE（IE瀏覽器）：-ms-
Opera（歐朋瀏覽器）：-o-
二、選擇器
CSS3新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精準度。CSS3選擇器與jQuery中所提供的絕大部分選擇器兼容。
1、屬性選擇器
所謂屬性選擇器就是根據指定名稱的屬性的值來查找元素。
1、E[attr]：查找指定的擁有attr屬性的E標簽。
/*查找擁有style屬性的裏標簽*/ li[style] {}
2、E[attr=value]：查找擁有指定的attr屬性並且屬性值為value的E標簽。
/*查找擁有class屬性並且值為Red的li標簽*/
li[class=red] {}3、E[attr*=value]:查找擁有指定的attr屬性並且屬性值中包含(可以在任意位置)value的E標簽
li[class*=red] {}4、E[attr^=value]：查找擁有指定的attr屬性並且屬性值以value開頭的E標簽
li[class^=red] {}5、E[attr$=value]：查找擁有指定的attr屬性並且屬性值以value開結束的E標簽
li[class$=red] {}2、偽類選擇器
之前學過的偽類選擇器：a:hover，a:link， a:active， a:visited
偽類選擇器：以某元素相對於其父元素或兄弟元素的位置來獲取無素的結構偽類。
2.1、兄弟結構偽類
+：獲取當前元素的相鄰的滿足條件的元素
~：獲取當前元素的滿足條件的兄弟元素
/*下面這句樣式說明查找 ：添加了.first樣式的標簽的相鄰的li元素
要求：
1.必須相鄰。2.必須是指定類型的元素
*/
.first + li{
color: blue;
}
/*下面樣式查找添加了.first樣式的元素的所有兄弟li元素*/
.first ~ li{
color: pink;
}2.2、相對於父元素的偽類
2.2.1、查找第一個元素和最後一個元素（無過濾）
E:first-child：查找E元素的父級元素中的第一個E元素。
E:last-child ：查找E元素的父元素中最後一個指定類型的子元素
/*下面這句樣式查找：li的父元素中的第一個li元素
1.相對於當前指定元素的父元素
2.查找的類型必須是指定的類型*/
li:first-child{
color: red;
}
li:last-child{
background-color: skyblue;
}註意：在查找的時候並不會限制查找的元素的類型，也就是如果第一個元素不是E元素的話，就查找不到，查找的時候不會過濾掉E元素之外的元素。
2.2.2、查找第一個元素和最後一個元素（有過濾）
E:first-of-type：查找E元素的父級元素中的第一個E元素。
E:last-of-type ：查找E元素的父元素中最後一個指定類型的子元素
/*查找的時候限制類型 first-of-type*/
/*1.也是相對於父元素
2.在查找的時候只會查找滿足類型條件的元素，過渡掉其它類型的元素*/
li:first-of-type{
color: red;
}
li:last-of-type{
color: orange;
}2.2.3、查找單個元素或多個元素（無過濾）
E:nth-child(index)：查找指定索引位置的元素（從1開始的索引）
E:nth-child(even)：查找索引為偶數位置的元素
E:nth-child(odd)：查找索引為奇數位置的元素
與上面類似，下面是倒著計算的：
E:nth-last-child(xxx)
li:nth-child(5){
background-color: lightblue;
}
li:nth-child(even){
background-color: blue;
}
li:nth-child(odd){
background-color: red;
}
2.2.4、查找單個元素或多個元素（有過濾）
li:nth-of-type(even){
background-color: orange;
}
li:nth-of-type(odd){
background-color: pink;
}2.2.5、查找開頭或結尾的多個元素
無過濾：E:nth-child(n) ：n 遵循線性變化，其取值0、1、2、3、4、... 但是當參數小於等於0時，選取無效。
有過濾：E:nth-of-type(n)
無過濾倒序：E:nth-last-child(n)
有過濾倒序：E:nth-last-of-type(n)
示例：
/*想為前面的5個元素添加樣式*/
/*n:默認取值範圍為0~子元素的長度.但是當n<=0時，選取無效
0>>5
1>>4
...
4>>1
5>>0*/
li:nth-of-type(-n+5){
font-size: 30px;
}
li:nth-last-of-type(-n+5){
font-size: 30px;
}PS：n 可是多種形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等。
2.2.6、空值：沒有任何的內容，連空格都沒有
li:empty{
background-color: red;
}2.2.7、錨鏈接偽類
E:target ：可以為錨點目標元素添加樣式，當目標元素被觸發為當前錨鏈接的目標時，調用此偽類樣式。
/*h2為錨點，在被觸發時將h2的字體改為紅色*/
h2:target{
color: red;
}3、偽元素選擇器
偽元素之所以被稱為偽元素，是因為它不是真正的DOM，但是卻可以當成一個DOM元素看待，它的用法和真正的DOM元素的操作是一樣的，但是在DOM樹中又不會出現。
既然是偽元素，那麽無法使用 JS 的方式來獲取。
css有一系列的偽元素，如::before，::after，::first-line，::first-letter等，本文就詳述一下:before和:after元素的使用。
3.1、E::before，E::after
- 是一個行內元素，需要轉換成塊：
display:block或者float:left/right或者使用position。 - 必須添加 content , 哪怕不設置內容，也需要
content:""，否則不會起作用。 - E:after、E:before 在舊版本裏是偽類，在新版本裏是偽元素，因為在新版本下E:after、E:before會被自動識別為E::after、E::before，按偽元素來對待，這樣做的目的是用來做兼容處理。
E::before：定義在一個元素的內容之前插入 content 屬性定義的內容與樣式。E::after：定義在一個元素的內容之後插入 content 屬性定義的內容與樣式。
註意：
- IE6、IE7與IE8（怪異模式Quirks mode）不支持此偽元素
- CSS2中 E:before或者E:after，是屬於偽類的，並且沒有偽元素的概念，CSS3中 提出偽元素的概念 E::before和E::after，並且歸屬到了偽元素當中，偽類裏就不再存在E:before或者 E:after偽類
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div:nth-of-type(1){
width: 300px;
height: 200px;
background-color: red;
float: left;
position: relative;
}
div:nth-of-type(2){
width: 100px;
height: 200px;
background-color: blue;
float: left;
}
div:nth-of-type(1)::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
right: -10px;
top: -10px;
}
div:nth-of-type(1)::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
right: -10px;
bottom: -10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
3.2、E:first-letter
選中文本的第一個字母（英文）或者文字（中文）
/*設置首字下沈*/
p::first-letter {
font-size: 40px;
float: left;
}3.3、E::first-line
選中文本第一行
PS：如果同時設置了::first-letter，那麽 ::first-line 無法對第一個字母或文字進行設置（顏色除外）。
3.4、E::selection
設置選中文本的樣式。
註意：不能改變其大小，但是可以改變顏色。
p::selection {
background-color: orange;
}
從零開始學 Web 之 CSS3（一）CSS3概述，選擇器