CSS3介紹以及新增選取器，css3新增選取器

CSS3介紹以及新增選取器，css3新增選取器

一：基本介紹

1：css版本

css1: 定義了網頁的基本屬性：字型，顏色，補白，基本選取器等等。
css2：添加了進階功能：浮動，定位，進階選取器（子選取器，相鄰選取器，通用選取器）
css3：遵循模組化開發。發布時間並不是一個時間點，而是時間段。（2002-至今）


2：css3新特性
（1）CSS選取器
（2）新的顏色制式和透明設定
（3）多欄布局的實現
（4）多背景圖效果
（5）文字陰影製作效果
（6）開放的網路字型類型
（7）圓角
（8）邊框背景圖片
（9）盒子陰影

（10）媒體查詢

二：新增選取器

css3新增選取器
(1)css3屬性選取器
(2)css3結構偽類別選取器
(3)css3 UI元素狀態偽類別選取器
(4)其他新增選取器

1:兄弟選取器
<style>
p~p{color:#f00;}
</style>
<div><!--該div是父元素-->
<p>中國十大傑出人物</p>
<p>①別人家的孩子</p>
<p>②別人家的爸爸</p>
<p>③別人家的媽媽</p>
<p>④別人家的老公</p>
<p>⑤別人家的老婆</p>
<p>⑥別人家的公公</p>
<p>⑦別人家的婆婆</p>
<p>⑧別人家的公司</p>
<p>⑨別人家的領到</p>
<p>⑩別人家的員工</p>
</div>


注意：(1)不選擇第一個p標籤，只選擇它的兄弟
 (2)只選擇後面的兄弟標籤，不能往前選擇。


2:結構偽類別選取器  
（1）child系列
first-child  正數
last-child  倒數




nth-child(n);
nth-child(3n+1) 隔兩個選一個
nth-child(even)；nth-child(2n)偶數
nth-child(odd) ;nth-child(2n+1)奇數




nth-last-child(n) 倒數
其他同上


only-child 唯一子項目，獨生子
舉例：li:only-child{color:#f00;font-size:30px}




舉例：
<style>
p:first-child{color:#f00;}
</style>


<div id="A">
<h4>我是父親的第1個子項目，可惜我不是p標籤，所以無法選中我</h4>
<p>我是父親的第2個子項目</p>
<p>我是父親的第3個子項目</p>
<p>我是父親的第4個子項目</p>
<p>我是父親的第5個子項目</p>
</div>


<div id="B">
<p>我是父親的第1個子項目，並且我是p標籤，所以我被選中了</p>
<p>我是父親的第2個子項目</p>
<p>我是父親的第3個子項目</p>
<p>我是父親的第4個子項目</p>
<p>我是父親的第5個子項目</p>
</div>


（2）of-type系列
fist-of-type
last-of-type
nth-of-type(n)
nth-last-of-type(n)
only-of-type
類似child系列，但是只關注同類標籤，只給同類標籤計數。

(3)empty


(4)root
html:root{background:green}
等價於
html{background:green}
html的根永遠都是html元素，整個html頁面。沒有什麼實際意義。