中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器

這篇文章主要介紹怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

為萬榮等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及萬榮網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站制作、萬榮網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

  • 結(jié)構(gòu)偽類選擇器是用來處理一些特殊的效果。

  • 結(jié)構(gòu)偽類選擇器屬性說明表 

屬性描述
E:first-child匹配E元素的第一個(gè)子元素。
E:last-child匹配E元素的最后一個(gè)子元素。
E:nth-child(n)匹配E元素的第n個(gè)子元素。
E:nth-child(2n)或者E:nth-child(even)匹配E元素的偶數(shù)子元素。
E:nth-child(2n+1)或者E:nth-child(odd)匹配E元素的奇數(shù)子元素。
E:only-child匹配E元素中僅有一個(gè)的子元素。

first-child實(shí)踐

使用first-child屬性設(shè)置ul標(biāo)簽中的第一個(gè)li標(biāo)簽文本顏色為紅色。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>結(jié)構(gòu)偽類選擇器</title>
  <style>  
    ul li:first-child{
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

結(jié)果圖

怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器

last-child實(shí)踐

使用last-child屬性設(shè)置ul標(biāo)簽中的最后一個(gè)li標(biāo)簽文本顏色為紅色。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>結(jié)構(gòu)偽類選擇器</title>
  <style>  
    ul li:last-child{
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

結(jié)果圖

怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器

nth-child實(shí)踐

使用nth-child(n)屬性設(shè)置ul標(biāo)簽中的第三個(gè)li標(biāo)簽文本顏色為紅色。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>結(jié)構(gòu)偽類選擇器</title>
  <style>  
    ul li:nth-child(3){
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

結(jié)果圖

怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器

使用nth-child(even)屬性設(shè)置ul標(biāo)簽中的偶數(shù)li標(biāo)簽文本顏色為紅色

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>結(jié)構(gòu)偽類選擇器</title>
  <style>  
    ul li:nth-child(even){
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

結(jié)果圖

怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器

使用nth-child(2n+1)屬性設(shè)置ul標(biāo)簽中的奇數(shù)li標(biāo)簽文本顏色為紅色

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>結(jié)構(gòu)偽類選擇器</title>
  <style>  
    ul li:nth-child(2n+1){
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

結(jié)果圖

怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器

only-child實(shí)踐

使用only-child屬性設(shè)置ul標(biāo)簽中的僅有一個(gè)li標(biāo)簽文本顏色為紅色。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>結(jié)構(gòu)偽類選擇器</title>
  <style>  
    ul li:only-child{
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
   <ul>
     <li>就我一個(gè)li標(biāo)簽</li>
   </ul>
</body>

</html>

結(jié)果圖

怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器

偽元素選擇器介紹

  • 偽元素主要作用就是操作元素的文本和添加內(nèi)容。

  • 偽元素使用說明表 

屬性描述
E:first-letter設(shè)置E元素中的第一個(gè)字。
E:first-line設(shè)置E元素中的第一行字。
E::before在E元素最前面添加內(nèi)容。
E::after在E元素最后面添加內(nèi)容。

first-letter實(shí)踐

使用first-letter屬性設(shè)置ul標(biāo)簽中li標(biāo)簽的文本第一個(gè)字顏色為紅色。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>偽元素選擇器</title>
  <style>  
    ul li:first-letter{
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>微笑是最初的信仰</li>
   </ul>
</body>

</html>

結(jié)果圖

怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器

first-line實(shí)踐

使用first-line屬性設(shè)置div標(biāo)簽的文本第一行字顏色為紅色。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>偽元素選擇器</title>
  <style>  
    div:first-line{
      color: red;
    }
  </style>
</head>

<body>
   <div>
     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
   </div>
</body>
</html>

結(jié)果圖

怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器

before實(shí)踐

使用before屬性設(shè)置div標(biāo)簽的文本前面添加“加油”2個(gè)字。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>偽元素選擇器</title>
  <style>  
    div::before{
      content:"加油";
    }
  </style>
</head>

<body>
   <div>微笑是最初的信仰。</div>
</body>

</html>

結(jié)果圖

怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器

注意：添加的文本必須寫在content:"加油";里面。

after實(shí)踐

使用after屬性設(shè)置div標(biāo)簽的文本最后面添加“加油”2個(gè)字。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>偽元素選擇器</title>
  <style>  
    div::after{
      content:"加油";
    }
  </style>
</head>

<body>
   <div>微笑是最初的信仰，</div>
</body>

</html>

結(jié)果圖

怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器

注意：添加的文本必須寫在content:"加油";里面。

以上是“怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：怎么使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器
鏈接地址：http://www.rwnh.cn/article36/jiedsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站制作、虛擬主機(jī)、企業(yè)建站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)

廣告

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

微信小程序開發(fā)
大名县| 齐齐哈尔市| 涿鹿县| 工布江达县| 临安市| 吉林省| 张家港市| 丹巴县| 金昌市| 呼图壁县| 岳西县| 印江| 八宿县| 炎陵县| 时尚| 盐边县| 梧州市| 广汉市| 新巴尔虎左旗| 彝良县| 敦化市| 筠连县| 荔浦县| 陇南市| 简阳市| 和硕县| 奉新县| 达孜县| 姚安县| 寿阳县| 交口县| 天水市| 安福县| 古田县| 呈贡县| 康乐县| 阿拉善盟| 普定县| 广东省| 临海市| 明水县|