CSS3 新增選擇器的實(shí)例

結(jié)構(gòu)(位置)偽類選擇器(CSS3)
- :first-child :選取屬于其父元素的首個(gè)子元素的指定選擇器
- :last-child :選取屬于其父元素的最后一個(gè)子元素的指定選擇器
- :nth-child(n) : 匹配屬于其父元素的第 N 個(gè)子元素,不論元素的類型
- :nth-last-child(n) :選擇器匹配屬于其元素的第 N 個(gè)子元素的每個(gè)元素,不論元素的類型,從最后一個(gè)子元素開始計(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 開始位置就行了 */ 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)部的開始位置和結(jié)束位創(chuàng)建一個(gè)元素,該元素為行內(nèi)元素,且必須要結(jié)合content屬性使用。
div::befor { content:"開始"; } div::after { content:"結(jié)束"; }
E:after、E:before 在舊版本里是偽元素,CSS3的規(guī)范里“:”用來表示偽類,“::”用來表示偽元素,但是在高版本瀏覽器下E:after、E:before會(huì)被自動(dòng)識別為E::after、E::before,這樣做的目的是用來做兼容處理。
":" 與 "::" 區(qū)別在于區(qū)分偽類和偽元素
之所以被稱為偽元素,是因?yàn)樗麄儾皇钦嬲捻撁嬖兀琱tml沒有對應(yīng)的元素,但是其所有用法和表現(xiàn)行為與真正的頁面元素一樣,可以對其使用諸如頁面元素一樣的css樣式,表面上看上去貌似是頁面的某些元素來展現(xiàn),實(shí)際上是css樣式展現(xiàn)的行為,因此被稱為偽元素。是偽元素在html代碼機(jī)構(gòu)中的展現(xiàn),可以看出無法偽元素的結(jié)構(gòu)無法審查
注意
偽元素:before和:after添加的內(nèi)容默認(rèn)是inline元素**;這個(gè)兩個(gè)偽元素的content屬性,表示偽元素的內(nèi)容,設(shè)置:before和:after時(shí)必須設(shè)置其content屬性,否則偽元素就不起作用。
總結(jié)
以上所述是小編給大家介紹的CSS3 新增選擇器的實(shí)例,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
- 這篇文章主要介紹了CSS3選擇器新增問題的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-21
- 這篇文章主要介紹了CSS 選擇所有子元素添加樣式的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)2020-09-02
- 這篇文章主要介紹了CSS選擇器中的正則表達(dá)式使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-03-11
- 這篇文章主要介紹了一文教你玩轉(zhuǎn)CSS 組合選擇器,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-20