結構(位置)偽類選擇器（CSS3)
li:first-child { /* 選擇第一個孩子 */ color: pink; }li:last-child { /* 最后一個孩子 */ color: purple; }li:nth-child(4) { /* 選擇第4個孩子 n 代表 第幾個的意思 */ color: skyblue; }屬性選擇器
選取標簽帶有某些特殊屬性的選擇器 我們成為屬性選擇器
/* 獲取到 擁有 該屬性的元素 */div[class^=font] { /* class^=font 表示 font 開始位置就行了 */ color: pink; }div[class$=footer] { /* class$=footer 表示 footer 結束位置就行了 */ color: skyblue; }div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */ color: green; }<div class="font12">屬性選擇器</div> <div class="font12">屬性選擇器</div> <div class="font24">屬性選擇器</div> <div class="font24">屬性選擇器</div> <div class="font24">屬性選擇器</div> <div class="24font">屬性選擇器123</div> <div class="sub-footer">屬性選擇器footer</div> <div class="jd-footer">屬性選擇器footer</div> <div class="news-tao-nav">屬性選擇器</div> <div class="news-tao-header">屬性選擇器</div> <div class="tao-header">屬性選擇器</div>input[type=text]div[class*=tao]偽元素選擇器（CSS3)
p::first-letter { font-size: 20px; color: hotpink;}/* 首行特殊樣式 */p::first-line { color: skyblue;}p::selection { /* font-size: 50px; */ color: orange;}4、E::before和E::after
在E元素內部的開始位置和結束位創建一個元素，該元素為行內元素，且必須要結合content屬性使用。
div::befor { content:"開始";}div::after { content:"結束";}E:after、E:before 在舊版本里是偽元素，CSS3的規范里“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做兼容處理。
":" 與 "::" 區別在于區分偽類和偽元素
之所以被稱為偽元素，是因為他們不是真正的頁面元素，html沒有對應的元素，但是其所有用法和表現行為與真正的頁面元素一樣，可以對其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素來展現，實際上是css樣式展現的行為，因此被稱為偽元素。是偽元素在html代碼機構中的展現，可以看出無法偽元素的結構無法審查
注意
偽元素:before和:after添加的內容默認是inline元素**；這個兩個偽元素的content屬性，表示偽元素的內容,設置:before和:after時必須設置其content屬性，否則偽元素就不起作用。
總結
以上所述是小編給大家介紹的CSS3 新增選擇器的實例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
