详解怎样应用CSS3中的构造伪类挑选器和伪元素挑

日期：2021-02-28 类型：科技新闻我要分享

关键词：小程序制作流程，抽奖小程序，微信小程序怎么开店，小程序码生成，小程序模版

构造伪类挑选器详细介绍

构造伪类挑选器是用来解决1些独特的实际效果。
构造伪类挑选器特性表明表

特性叙述 E:first-child 配对E元素的第1个子元素。 E:last-child 配对E元素的最终1个子元素。 E:nth-child(n) 配对E元素的第n个子元素。 E:nth-child(2n)或E:nth-child(even) 配对E元素的偶数子元素。 E:nth-child(2n+1)或E:nth-child(odd) 配对E元素的单数子元素。 E:only-child 配对E元素中唯一1个的子元素。

first-child实践活动

应用first-child特性设定ul标识中的第1个li标识文字色调为鲜红色。

编码块

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

<head>
  <meta charset="UTF⑻">
  <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-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>

結果图

last-child实践活动

应用last-child特性设定ul标识中的最终1个li标识文字色调为鲜红色。

编码块

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

<head>
  <meta charset="UTF⑻">
  <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: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>

結果图

nth-child实践活动

应用nth-child(n)特性设定ul标识中的第3个li标识文字色调为鲜红色。

编码块

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

<head>
  <meta charset="UTF⑻">
  <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: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>

結果图

应用nth-child(even)特性设定ul标识中的偶数li标识文字色调为鲜红色

编码块

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

<head>
  <meta charset="UTF⑻">
  <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: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>

結果图

应用nth-child(2n+1)特性设定ul标识中的单数li标识文字色调为鲜红色

编码块

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

<head>
  <meta charset="UTF⑻">
  <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: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>

結果图

only-child实践活动

应用only-child特性设定ul标识中的唯一1个li标识文字色调为鲜红色。

编码块

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

<head>
  <meta charset="UTF⑻">
  <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: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>就我1个li标识</li>
   </ul>
</body>

</html>

結果图

伪元素挑选器详细介绍

伪元素关键功效便是实际操作元素的文字和加上內容。
伪元素应用表明表

特性叙述 E:first-letter 设定E元素中的第1个字。 E:first-line 设定E元素中的第1行字。 E::before 在E元素最前面加上內容。 E::after 在E元素最终面加上內容。

first-letter实践活动

应用first-letter特性设定ul标识中li标识的文字第1个字色调为鲜红色。

编码块

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

<head>
  <meta charset="UTF⑻">
  <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>

結果图

first-line实践活动

应用first-line特性设定div标识的文字第1行字色调为鲜红色。

编码块

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

<head>
  <meta charset="UTF⑻">
  <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>

結果图

before实践活动

应用before特性设定div标识的文字前面加上“加油”2个字。

编码块

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

<head>
  <meta charset="UTF⑻">
  <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>

結果图

留意：加上的文字务必写在content:"加油";里边。

after实践活动

应用after特性设定div标识的文字最终面加上“加油”2个字。

编码块

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

<head>
  <meta charset="UTF⑻">
  <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>

結果图

留意：加上的文字务必写在content:"加油";里边。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：CSS完成掩藏翻转条并能够翻转內容实际效果(3种方返回下一篇：没有了