// 將所有margin和padding歸零，不建議使用，增加瀏覽器負擔
* // 適用於子選擇器 選擇#container層中的子元素
#container *
firefox
chrome
safari
opera6+✔
✔✔✔
// id選擇器不能重複使用，盡量避免使用
#container
firefox
chrome
safari
opera6+✔
✔✔✔
// 可以用於多個元素
.error
firefox
chrome
safari
opera6+✔
✔✔✔
// 選擇li標籤下的a標籤
li a
後代選擇器的渲染速率不快，特別是在有很長的字首元素時ie
firefox
chrome
safari
opera6+✔
✔✔✔
// 選擇a標籤
a
firefox
chrome
safari
opera6+✔
✔✔✔
// 選擇沒有被訪問過的a標籤
a:link
// 選擇已經被訪問過的a標籤
a:visted
:link作用於沒有訪問過的鏈結，:visited作用於訪問過的鏈結。ie
firefox
chrome
safari
opera7+✔
✔✔✔
// 選擇ul標籤後的第乙個p標籤
ul + p
firefox
chrome
safari
opera7+✔
✔✔✔
// 選擇ul標籤後緊鄰的所有p標籤
ul ~ p
firefox
chrome
safari
opera7+✔
✔✔✔
// 選擇div下第乙個p標籤，不會對之後的p標籤產生影響
div > p
firefox
chrome
safari
opera7+✔
✔✔✔
// 選擇所有帶有title屬性的a標籤
a[title]
firefox
chrome
safari
opera7+✔
✔✔✔
// 選擇所有連線到a.com 的a標籤
a[href="a.com"]
firefox
chrome
safari
opera7+✔
✔✔✔
// 選擇連線位址中存在docs欄位的a標籤
a[href*="docs"]
firefox
chrome
safari
opera7+✔
✔✔✔
// 選擇所有連線位址以http開頭的a標籤
✔✔✔
// 選擇所有data-filetype為image的a標籤
✔✔✔
// 選擇所有data-info含有external的a標籤
✔✔✔
// 選擇為選擇狀態的type為radio的input標籤
input[type=radio]:checked
ie
firefox
chrome
safari
opera9+✔
✔✔✔
// 清除浮動
.clearfix
:after
可以用來清除浮動、或新增元素
ie
firefox
chrome
safari
opera8+✔
✔✔✔
// div被滑鼠懸浮時的樣式
div:hover
ie
firefox
chrome
safari
opera6+✔
✔✔✔
// 選擇除p標籤外所有標籤
*:not(p)
ie
firefox
chrome
safari
opera9+✔
✔✔✔
// 選擇p標籤第一行
p::first-line
// 選擇p標籤第乙個字
p::first-letter
ie
firefox
chrome
safari
opera6+✔
✔✔✔
用::表示，只能用於塊級元素
// 選擇第三個li標籤
li:nth-child(3)
// 選擇2的倍數的li標籤
li:nth-child(2n)
ie
firefox
chrome
safari
opera9+✔
✔✔✔
// 選擇倒數第二個li標籤
li:nth-last-child(2)
ie
firefox
chrome
safari
opera9+✔
✔✔✔
// 選擇第三個ul
ul:nth-of-type(3)
ie
firefox
chrome
safari
opera9+✔
✔✔✔
// 選擇倒數第三個ul
ul:nth-last-of-type(3)
ie
firefox
chrome
safari
opera9+✔
✔✔✔
// 第乙個li標籤
ul li:first-child
ie
firefox
chrome
safari
opera7+✔
✔✔✔
// 最後乙個li標籤
ul > li:last-child
ie
firefox
chrome
safari
opera9+✔
✔✔✔
// 選擇只有乙個子並且是p標籤的div
div p:only-child
ie
firefox
chrome
safari
opera9+✔
✔✔✔
// 選擇只有乙個子並且是p標籤的div
div p:only-of-type
ie
firefox
chrome
safari
opera9+✔
✔✔✔
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...
CSS3的選擇器
漸進增強 從小到大 先保證最基本的功能 使用者體驗的提公升 優雅降級 從大到小 先針對版本較高的裝置進行專案構建,保證使用者體驗的完美 犧牲一些效果,保證最基本的功能 選擇器 選擇符 id class 型別 div span.後代選擇器 偽類選擇器 偽元素選擇器.屬性選擇器 e attr 選中e元素...