類名選擇器是不是css3新增的

這篇文章主要講解了“類名選擇器是不是css3新增的”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“類名選擇器是不是css3新增的”吧！

創(chuàng)新互聯(lián)建站是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的十余年時間我們累計服務(wù)了上千家以及全國政企客戶，如廣告設(shè)計等企業(yè)單位，完善的項目管理流程，嚴格把控項目進度與質(zhì)量監(jiān)控加上過硬的技術(shù)實力獲得客戶的一致贊賞。

類名選擇器不是css3新增才有的，類名選擇器用于選取帶有指定類的元素，語法為“.class{css代碼;}”；類名選擇器是在css3之前就已經(jīng)開始使用了，并不是css3新增的，css3新增的選擇器有屬性選擇器、結(jié)構(gòu)偽類選擇器等。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。

類名選擇器

類選擇器

用class屬性調(diào)用class類

舉例：

 <p class="one">類選擇器</p>

 .one {
       color: yellow;
        }

這里的p標簽類名叫做one，css給他添加樣式的時候用的.+one（他的類名）選擇的他，這種就是類選擇器。

擴展知識：css3新增選擇器

屬性選擇器

• input[value] { }(input并且具有value屬性)

• input[type=text] {} {input的屬性的值為text的需要更改}

• div[class^=icon] { } (選擇首先是div 然后 具有class屬性 并且屬性值 必須是 icon開頭的這些元素 )

• section[class$=data] {} ( 選擇類名以data結(jié)尾的 )

結(jié)構(gòu)偽類選擇器

• ul li:first-child { } （選擇ul里面的第一個孩子 小li）

• ul li:last-child { } （選擇ul里面的最后一個孩子 小li）

• ul li:nth-child(2) { } （選擇ul里面的第二個孩子 小li）

• ul li:nth-child(6) { } （選擇ul里面的第六個孩子 小li）

• ul li:nth-child(even/2n) { } （把所有的偶數(shù) even的孩子選出來 ）

• ul li:nth-child(odd/2n+1) { } （把所有的奇數(shù) odd的孩子選出來）

• ol li:nth-child(n) { } （從0開始 每次加1 往后面計算 必須是n 不能是其他的字母 選擇了所有的孩子

• ul li:nth-child(n+5) { } (選擇從第五個孩子開始)

• ul li:nth-child(-n+5) { } (選擇從第五個孩子開始往前數(shù))

• ul li:first-of-type { } （第一個孩子）

• ul li:last-of-type { } （最后一個孩子）

• ul li:nth-of-type(even) { } （偶數(shù)孩子）

• section div:nth-child(1) { } （nth-child 會把所有的盒子都排列序號執(zhí)行的時候首先看 :nth-child(1) 之后回去看 前面 div ）

• section div:nth-of-type(1) { } （nth-of-type 會把指定元素的盒子排列序號；執(zhí)行的時候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第幾個孩子 ）

偽元素選擇器（頁面中找不到的，常用于字體標簽）[和標簽選擇器一樣，權(quán)重為1]

• ：：before在元素的前面插入內(nèi)容（父盒子的內(nèi)部的前面）

• ：：after在元素的后面插入內(nèi)容（父盒子的內(nèi)部的后面）

• 必須有content屬性

• div::after { content: '我';}

• .tudou:hover::before { } （當我們鼠標經(jīng)過了 土豆這個盒子，就讓里面before遮罩層顯示出來）

• 偽元素清除浮動

感謝各位的閱讀，以上就是“類名選擇器是不是css3新增的”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對類名選擇器是不是css3新增的這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

標題名稱：類名選擇器是不是css3新增的
分享網(wǎng)址：http://bm7419.com/article30/pscgpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、微信小程序、網(wǎng)站制作、建站公司、App開發(fā)、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)