如何在CSS3中新增選擇器

本篇文章為大家展示了如何在CSS3中新增選擇器，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元田林做網(wǎng)站,已為上家服務(wù),為田林各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

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

  • :first-child :選取屬于其父元素的首個子元素的指定選擇器

  • :last-child :選取屬于其父元素的最后一個子元素的指定選擇器

  • :nth-child(n) ： 匹配屬于其父元素的第 N 個子元素，不論元素的類型

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

li:first-child { /*  選擇第一個孩子 */
                color: pink; 
            }
li:last-child {   /* 最后一個孩子 */
                color: purple;
            }
li:nth-child(4) {   /* 選擇第4個孩子  n  代表 第幾個的意思 */ 
                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文本的第一個單詞或字（如中文、日文、韓文等）

  • 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)建一個元素，該元素為行內(nèi)元素，且必須要結(jié)合content屬性使用。

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

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

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

之所以被稱為偽元素，是因為他們不是真正的頁面元素，html沒有對應(yīng)的元素，但是其所有用法和表現(xiàn)行為與真正的頁面元素一樣，可以對其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素來展現(xiàn)，實際上是css樣式展現(xiàn)的行為，因此被稱為偽元素。是偽元素在html代碼機構(gòu)中的展現(xiàn)，可以看出無法偽元素的結(jié)構(gòu)無法審查

注意

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

上述內(nèi)容就是如何在CSS3中新增選擇器，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：如何在CSS3中新增選擇器
鏈接地址：http://muchs.cn/article20/gpgpjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、做網(wǎng)站、用戶體驗、微信公眾號、建站公司、手機網(wǎng)站建設(shè)

廣告

聲明：本網(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)

小程序開發(fā)