各位小夥伴
俗話說
一個籬笆三根柱
一個好漢三個幫
只有 HTML 是做不出好看的頁面的。今天我們來分享的就是，號稱前端三劍客的第二個成員 css，關於 css 在之前也有在文章中分享過，這邊就不複習了，今天主要是和大家一起看一下 css3 新增的選擇器
先來做一下準備工作
頁面的效果：
看到上面的框框了嗎？我們就是通過給這些框框添加背景色的方式，來讓大家，了解css3的選擇器的效果，下面正式開始：
關聯選擇器
E1~E2
選擇 E1 後面的兄弟 E2。
頁面效果：
選擇除了第一個 p 元素之外，後面所有的 p 元素，即使中間隔著一個 div 標籤，也能被選中，背景色變成藍色。
屬性選擇器新增
[^=" " ] 選中以...開頭的元素
[$=" " ] 選中以...結束的元素
[*=" " ] 包含...都元素都被選中
定義三個 p 標籤，這個樣式就是以 test 開頭的 p 標籤變成綠色，以 test 結尾的 p 標籤變成黃色。
效果：
最後演示的就是包含，夥伴們使用的時候要注意，如果把這個選擇器放在最下面那麼，那麼所有的三個標籤都會被覆蓋了之前的顏色，變成藍色。放在最上面的話，也是同理，後面的樣式會覆蓋之前的樣式。
偽類新增
first-of-type
選擇到 p，p 必須為其父級所有子元素為 p 的第一個 p 元素。
選擇了，div 標籤中的 第一個 p 元素。
p:last-of-type
選擇到 p，p 必須為其父級所有子元素為 p 的最後一個 p 元素。
p:only-of-type
選擇到 p，p 必須為其父級所有子元素為 p 的唯一一個 p 元素。
在上面的 div 中只有一個 p 元素，現在我們使用這個 only-of-type 看一下效果。
記住必須是唯一的一個哦，要是有兩個的話，就選不中了。
p:nth-of-type(n)
選擇到 p, p 必須為其父級所有子元素為 p 的第 n 個 p 元素。
p:nth-last-of-type(n)
選擇到 p, p 必須為父級所有子元素為 p 的 d 倒數第 n 個 p 元素。
下面是沒有 of 的
p:only-child
選擇 p,p 必須為其父級的唯一一個子元素。
效果：
p:last-child
選擇 p,p 必須為他們父元素的最後一個子元素。
效果：
p:nth-child(n)
選擇 p,p 必須為其父級的第 n 個子元素。
p:nth-last-child(n)
選擇 p,p 必須為其父級的倒數第 n 個子元素。
效果：
這其中框住的這條背景顏色，沒有成功，因為第二個元素不是 div 是 p，在使用的時候要注意，元素的類型，和位置一定要準確。
p:target
選擇到 p，被錨點激活的 p
效果：
p::selection
被用戶選中的 p
效果：
不用懷疑的確是兩個冒號
上代碼
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <meta name="Keywords" content="關鍵字,關鍵詞"> <meta name="Description" content="描述和簡介"> <title>Title</title> <style type="text/css"> *{margin:0;padding:0;} body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;} a{text-decoration:none;color: inherit;} img{display: block;border:none;} ol,ul{list-style:none;} .clearfix:after content: "";display: block;clear:both;} .main{ width: 1200px; margin: 100px auto; } .main div{ width: 200px; margin: auto; box-shadow: 0 0 10px 0 #000; } .main div p,.main div div { width: 100px; height: 100px; margin: 10px auto; text-align: center; font: bold 30px/100px ""; color:#fff; box-shadow: 0 0 10px 0 #000; } .box1 p~p{ background: blue; } .box2 p[class*="test"]{ background: blue;} .box2 p[class^="test"]{ background: green;} .box2 p[class$="test"]{ background: yellow;} /*.box3 p:first-of-type{ background: purple;}*/ .box3 p:last-of-type{ background: purple;} .box4 p:only-of-type{ background: blue;} /*.box5 p:nth-of-type(2){ background: orangered;}*/ .box5 p:nth-last-of-type(2){ background: red;} .box6 p:only-child{ background: deeppink;} .box7 p:last-child{ background: green;} .box8 p:nth-child(3){ background: yellow;} .box8 div:nth-child(4){ background: blue;} .box8 div:nth-child(2){ background: red;} .box8 div:nth-last-child(4){ background: deeppink;} .box9 p:target{ background: blue;} .box10 span::selection{ background: deeppink; color:#fff;} </style></head><body> <div> <div> <p></p> <p></p> <p></p> <div></div> <p></p> </div> <div> <p></p> <p></p> <p></p> </div> <div> <div></div> <p>1</p> <p>2</p> <p>3</p> </div> <div> <div></div> <p></p> </div> <div> <div></div> <p>1</p> <p>2</p> <div></div> </div> <div> <p></p> </div> <div> <div></div> <p>1</p> <p>2</p> </div> <div> <div></div> <p>1</p> <p>2</p> <div></div> </div> <div> <a href="#tar1">點我~點我~</a> <p id="tar1"></p> <a href="#tar2">點我~點我~</a> <p id="tar2"></p> </div> <div> <span>我是娜娜，一個小仙女~</span> </div> </div></body></html>
好的今天的分享就到這裡了
最後給大家露一手
看到這個輪播圖了嗎？
純 css3 做的呦！
大家可以先試著做一下
下次告訴會大家怎麼做
那麼
夥伴們再見了