結(jié)構(gòu)(位置)偽類選擇器（CSS3)

• :first-child :選取屬于其父元素的首個(gè)子元素的指定選擇器
• :last-child :選取屬于其父元素的最后一個(gè)子元素的指定選擇器
• :nth-child(n) ： 匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型
• :nth-last-child(n) ：選擇器匹配屬于其元素的第 N 個(gè)子元素的每個(gè)元素，不論元素的類型，從最后一個(gè)子元素開(kāi)始計(jì)數(shù)。 n 可以是數(shù)字、關(guān)鍵詞或公式​

li:first-child { /*  選擇第一個(gè)孩子 */                color: pink;             }li:last-child {   /* 最后一個(gè)孩子 */                color: purple;            }li:nth-child(4) {   /* 選擇第4個(gè)孩子  n  代表 第幾個(gè)的意思 */                 color: skyblue;            }

屬性選擇器

選取標(biāo)簽帶有某些特殊屬性的選擇器 我們成為屬性選擇器

/* 獲取到 擁有 該屬性的元素 */div[class^=font] { /*  class^=font 表示 font 開(kāi)始位置就行了 */            color: pink;        }div[class$=footer] { /*  class$=footer 表示 footer 結(jié)束位置就行了 */            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)

• E::first-letter文本的第一個(gè)單詞或字（如中文、日文、韓文等）
• E::first-line 文本第一行；
• E::selection 可改變選中文本的樣式；

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元素內(nèi)部的開(kāi)始位置和結(jié)束位創(chuàng)建一個(gè)元素，該元素為行內(nèi)元素，且必須要結(jié)合content屬性使用。

div::befor {  content:"開(kāi)始";}div::after {  content:"結(jié)束";}

E:after、E:before 在舊版本里是偽元素，CSS3的規(guī)范里“:”用來(lái)表示偽類，“::”用來(lái)表示偽元素，但是在高版本瀏覽器下E:after、E:before會(huì)被自動(dòng)識(shí)別為E::after、E::before，這樣做的目的是用來(lái)做兼容處理。

":" 與 "::" 區(qū)別在于區(qū)分偽類和偽元素

之所以被稱為偽元素，是因?yàn)樗麄儾皇钦嬲捻?yè)面元素，html沒(méi)有對(duì)應(yīng)的元素，但是其所有用法和表現(xiàn)行為與真正的頁(yè)面元素一樣，可以對(duì)其使用諸如頁(yè)面元素一樣的css樣式，表面上看上去貌似是頁(yè)面的某些元素來(lái)展現(xiàn)，實(shí)際上是css樣式展現(xiàn)的行為，因此被稱為偽元素。是偽元素在html代碼機(jī)構(gòu)中的展現(xiàn)，可以看出無(wú)法偽元素的結(jié)構(gòu)無(wú)法審查

注意

偽元素:before和:after添加的內(nèi)容默認(rèn)是inline元素**；這個(gè)兩個(gè)偽元素的content屬性，表示偽元素的內(nèi)容,設(shè)置:before和:after時(shí)必須設(shè)置其content屬性，否則偽元素就不起作用。

總結(jié)

以上所述是小編給大家介紹的CSS3 新增選擇器的實(shí)例，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！