一、css3選擇器
1，css2.1選擇器
標籤 div
類 .class
id #id
萬用字元 *
交集 div.d#id
並集 div,p,span,#id{}
後代 div p span
2，關係選擇器
兒子 > ie7開始相容
下乙個兄弟 + ie7開始相容
後邊所有兄弟 ~
jquery都可以使用，ie6也能使用jquery
3，屬性選擇器
在css3中，標籤可以通過任何屬性被選擇
1)e[attr='val'] css3
選擇屬性attr的值位val的元素
2)e[attr^='val'] css3
選擇具有attr屬性且以val開頭的元素
3)e[attr$='val'] css3
選擇具有attr屬性且以val結束的元素
4)e[attr*='val'] css3
選擇具有attr屬性且包含val的元素
5)e[attr|='val'] css3
選擇具有attr屬性,並且屬性值使用—分割，並且—前邊內容是val的元素
6)e[attr~='val'] css3
選擇具有attr屬性，並且屬性值使用空格分割，並且空格後邊是val的元素
4，序選擇器
兒子序選擇器 類似使用偽類實現
1）p:first-child{}
選擇乙個p標籤，這個p標籤是某乙個元素的第乙個兒子 ie7
2）p:last-child{}
選擇乙個p標籤，這個p標籤是某乙個元素的最後乙個兒子 ie9
3）p:nth-child(n){}
選擇乙個p標籤，這個p標籤是某個元素的第n個兒子 ie9
n是從1開始的
p:nth-child(2n) 2,4.....
p:nth-child(3n+8) 8,11,14.....
注意：2n時，n從0開始，但2n最小只能是1，所以0是取不到的；
3n+8時，n從0開始，最小是8
4）p:nth-last-child(n){}
選擇乙個p標籤，這個p標籤是某個元素的倒數第n個兒子 ie9
p:nth-last-child(2n){}
倒著數的所有偶數個p被選中
5）p:nth-of-type(n){}
選擇乙個p標籤，這個p標籤是某個元素中第n個p標籤兒子 ie9
隻數p標籤，其他標籤不管
jquery中這些選擇器都是支援的
$('p').eq(3) 和 $('p:nth-child(3)')
5，偽類選擇器
a標籤的偽類：
:link :visited :hover :active
1):hover
可以給任何元素使用 ie7
2):focus
獲取焦點，當乙個表單元素獲取焦點時，能被選中
3):not
p:not(.lala)
選擇不帶有類名為lala的p標籤
4):only-child
唯一的兒子
p:only-child{}
如果乙個p是某個元素的唯一的兒子，就會被選中
5):empty
空標籤當乙個標籤首尾相連，沒有任何內容，包括空格換行tab文字等，即為空標籤
6):checked
當單選按鈕或核取方塊被選中時，執行偽類checked
7):disabled and :enabled ie9
無效的和有效的表單元素
6，偽元素
:: 表示偽元素
偽元素中必須寫的屬性是content
1）::before ::after
這兩個都是行內偽元素，需要轉為塊級元素或者脫標才能設定寬高
2）::selection
被選中的文字樣式 ie9
3）::first-letter ::first-line
第乙個文字和第一行文字
7，圓角
border-radius 單位：px % em ie9
border-bottom-radius
border-bottom-left-radius
CSS 3動畫介紹
原文 a beginner s introduction to css animation 譯文 乙個初學者對css動畫的介紹 譯者 dwqs 在這篇文章，我將向你介紹css動畫，隨著瀏覽器對動畫支援的改善，一種高效率的做事方式變得越來越流行。考慮到基礎知識，我將快速建立乙個從正方形變成圓形的動畫案...
CSS基礎 CSS3動畫
通過css3動畫屬性，我們可以建立動畫，實現簡單的動畫效果。css3動畫的實現需要用到animation屬性並配合關鍵幀 keyframes 使用。1.對需要設定動畫的元素新增animation屬性。2.設定關鍵幀 keyframes animation是所有動畫屬性的簡寫屬性，除了 animati...
CSS3基礎總結
1 css背景 background attachment 背景影象是否固定或者隨頁面其餘部分滾動 background color 背景顏色 background repeat 背景如何重複 background clip 規定背景的繪製區域 2 css文字 color 文字顏色 directio...