CSS3是CSS技術的升級版本趟脂，CSS3語言開發(fā)是朝著模塊化發(fā)展的泰讽。以前的規(guī)范作為一個模塊實在是太龐大而且比較復雜，所以昔期，把它分解為一些小的模塊已卸，更多新的模塊也被加入進來。這些模塊包括： 盒子模型硼一、列表模塊累澡、超鏈接方式 、語言模塊 般贼、背景和邊框 愧哟、文字特效 、多欄布局等
諾~給你圖
那么先從最基本的位置開始具伍。選擇器
一翅雏、選擇器
偽元素選擇器
:first-line 匹配內容的第一行
:first-letter 匹配內容的第一個字
:before 在元素內容之前插入一些內容圈驼，配合content使用
:after 在元素內容之后插入一些內容人芽，配合content使用
::selection 選擇器匹配元素中被用戶選中或處于高亮狀態(tài)的部分
栗子們
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽元素選擇器</title>
<style type="text/css">
/*first-line:匹配內容的第一行*/
p:first-line{
color: red;
}
/*first-letter：匹配內容的第一個字*/
p:first-letter{
font-size: 20px;
color: blue;
}
/*在元素內容之前插入一些內容，配合content使用*/
.beijing:before{
content: " 在元素內容之前插入一些內容 ";
}
/*在元素內容之后插入一些內容绩脆，配合content使用*/
.beijing:after{
content: " 在元素內容之后插入一些內容 ";
}
/*鼠標點擊滑過*/
div::selection{
color: gold;
}
</style>
</head>
<body>
<p>
匹配內容的第一行<br />
匹配內容的第一行
</p>
<p class="beijing">++在前后插入內容++</p>
<div>恭喜發(fā)財~紅包拿來萤厅！</div>
</body>
</html>
運行的全部結果
目標偽類選擇器
<a href="#second">鏈接</a>
<div id="second"></div>
結構類似上述代碼這樣
點擊鏈接，出現(xiàn)對象鏈接的對象
栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
div:target{
width: 300px;
height: 100px;
background-color: deeppink;
}
</style>
<body>
<p><a href="#first">第一個</a></p>
<div id="first">第一個div哦</div>
<p><a href="#second">第一個</a></p>
<div id="second">第二個div哦</div>
<p><a href="#third">第一個</a></p>
<div id="third">第三個div哦</div>
</body>
</html>
:target 表示選取當前活動的目標元素靴迫。
上述栗子表示當我們活動某個div時候惕味，為這個div添加樣式
運行結果
狀態(tài)偽類選擇器
:disabled 設置禁用
:enabled 設置非禁用
:focus 獲取焦點時觸發(fā)（這個要放在其他樣式后面方可生效，優(yōu)先級比較低）
:read-only 只讀
:checked 給單選多選設置樣式
栗子們
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*設置禁用樣式*/
input:disabled{
/*禁用不能輸入*/
background-color: deepskyblue;
}
/*設置非禁用樣式*/
input:enabled{
/*可以正常輸入 背景為粉色*/
background-color: greenyellow;
}
/*這個要放在其他樣式后面方可生效玉锌，優(yōu)先級比較低*/
/*獲取焦點時觸發(fā)*/
input:focus{
/*當輸入框獲取焦點時北京變?yōu)榉凵?/
background-color: deeppink;
}
/*只讀*/
input:read-only{
/*只可讀取 不可設置*/
background-color: pink;
}
/*給單選多選設置樣式*/
input:checked{
/*當選擇框被選中的時候高度變化*/
height: 100px;
}
</style>
</head>
<body>
獲取焦點<input type="text" /><br />
設置禁用<input type="text" disabled="disabled" /><br />
非禁用<input type="text" /><br />
<!--注意只讀和禁用的區(qū)別-->
只讀<input type="text" readonly="readonly"/><br />
選中<input type="checkbox" />
</body>
</html>
運行結果
上栗中 禁用和只讀 點擊上去無任何效果
結構偽類選擇器
:root 匹配當前選中的根元素
:empty 選取內容或者內容為注釋的元素
:first-child 匹配當前對象的第一個孩子（注意前方有一個空格）
:last-child 匹配當前對象的最后一個孩子
:nth-child(n) 匹配當前對象的第n個孩子
:nth-last-child(3) 匹配當前對象的倒數(shù)第n個孩子
:nth-child(add) 奇數(shù)的孩子
:nth-child(even) 偶數(shù)的孩子
p:first-of-type 選擇每個p元素是其父級的第一個p元素
p:only-of-type 選擇每個p元素是其父級的唯一p元素
否定偽類選擇器
:not(selector) 選擇每個并非selecter元素的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
background-color: gold;
}
li:not(.second){
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>第1個</li>
<li class="second">第2個</li>
<li>第3個</li>
<li>第4個</li>
</ul>
</body>
</html>
運行結果
層次選擇器
后代選擇器：祖輩選擇器和子選擇器中間有一個空格
子代選擇器：父選擇器和子選擇器中間是>
僅限后一個兄弟：此兄弟和后一個兄弟之間是+ 表示后一個兄弟
后面所有兄弟：此兄弟和后一個兄弟之間是~ 表示后面所有兄弟
/*后代選擇器*/
div p{
font-size: 20px;
color: red;
}
/*子代選擇器*/
div>div>p{
font-size: 30px;
color: blue;
}
/*僅限后一個兄弟*/
div p+h3{
color: green;
font-size: 40px;
}
/*后面所有兄弟*/
div p~h3{
color: salmon;
font-size: 50px;;
}
屬性選擇器
[attribute] 選擇帶有某個屬性的元素
[attribute=value] 選擇屬性值為固定值的元素
[attribute|=language] (比如：[lang|=en] 選擇一個lang屬性的起始值="en"的所有元素)
[attribute~=value] （比如：[title~=flower] 選擇標題屬性包含單詞"flower"的所有元素）
[attribute=value]（比如：a[src="runoob"] 選擇每一個src屬性的值包含子字符串"runoob"的元素）
[attribute^=value]（比如 a[src^="https"] 選擇每一個src屬性的值以"https"開頭的元素）
[attribute$=value]（比如：a[src$=".pdf"] 選擇每一個src屬性的值以".pdf"結尾的元素 ）**
注：以上選擇器IE6不支持 其他瀏覽器都支持
推薦個人認為比較實用的
[attr="value"] 可以選擇不同類型的元素名挥，特別是表單form元素的操作，比如說input[type="text"],input[type="checkbox"]
[attr$="value"] 以value結尾主守，在不同的鏈接中可以選擇不同的文件類型比如.html .css .js這種
喜歡就點贊
