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頁面。沒有什么實際意義。</span>
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！