详解如何使用CSS3中的结构伪类选择器和伪元素选择器

000

结构伪类选择器介绍

结构伪类选择器是用来处理一些特殊的效果。
结构伪类选择器属性说明表 

属性 描述
E:first-child 匹配E元素的第一个子元素。
E:last-child 匹配E元素的最后一个子元素。
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元素中仅有一个的子元素。
 

 

first-child实践

使用first-child属性设置ul标签中的第一个li标签文本颜色为红色。

代码块

<!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-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>

结果图

8e17415d170b38d9c11c546616f5043f

last-child实践

使用last-child属性设置ul标签中的最后一个li标签文本颜色为红色。

代码块

<!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: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>

结果图

07aca5b3bbd74fd883fedc56ad33fb52

nth-child实践

使用nth-child(n)属性设置ul标签中的第三个li标签文本颜色为红色。

代码块

<!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: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>

结果图

9fb505c9ad2e04b22b5933804df28696

使用nth-child(even)属性设置ul标签中的偶数li标签文本颜色为红色

代码块

<!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: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>

结果图

5ea334212fb57061eddd1ef5c3ed0fc5

使用nth-child(2n+1)属性设置ul标签中的奇数li标签文本颜色为红色

代码块

<!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: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>

结果图

26c365e4ac3476d42666fb91210c3d9e

only-child实践

使用only-child属性设置ul标签中的仅有一个li标签文本颜色为红色。

代码块

<!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: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>就我一个li标签</li>
   </ul>
</body>

</html>

结果图

e7ae08894a76f1dc828784cee899abf9

伪元素选择器介绍

伪元素主要作用就是操作元素的文本和添加内容。
伪元素使用说明表 

属性 描述
E:first-letter 设置E元素中的第一个字。
E:first-line 设置E元素中的第一行字。
E::before 在E元素最前面添加内容。
E::after 在E元素最后面添加内容。

first-letter实践

使用first-letter属性设置ul标签中li标签的文本第一个字颜色为红色。

代码块

<!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>

结果图

a1c0a8438b4342d466c5117a016ea840

first-line实践

使用first-line属性设置div标签的文本第一行字颜色为红色。

代码块

<!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>

结果图

192cacc112b1e62dabc6ad3052db43ae

before实践

使用before属性设置div标签的文本前面添加“加油”2个字。

代码块

<!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>

结果图

3e26a33c37a1b1492bd1af14bbf318e2

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

after实践

使用after属性设置div标签的文本最后面添加“加油”2个字。

代码块

<!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>

结果图

908ec07b48d8dc4dae3dfa869c7dfef4

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持免费资源网。

© 版权声明
版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
Html/CSS
# 编程开发# CSS
喜欢就支持一下吧
点赞0 分享
网络的头像-偶像资源网
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
29天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
29天前 28
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checke...
33天前 4
jQuery实现滚动效果-偶像资源网
jQuery实现滚动效果
jQuery实现滚动效果
29天前 3
PHP队列原理及基于队列的写文件案例-偶像资源网
PHP队列原理及基于队列的写文件案例
PHP队列原理及基于队列的写文件案例
29天前 2
微信小程序实现团购或秒杀批量倒计时-偶像资源网
微信小程序实现团购或秒杀批量倒计时
微信小程序实现团购或秒杀批量倒计时
29天前 2
相关推荐
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
29天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
29天前 28
吊打全网所有精美导航页引导页HTML源码-偶像资源网
吊打全网所有精美导航页引导页HTML源码
吊打全网所有精美导航页引导页HTML源码
33天前 24
css的基本选择器有哪些？-偶像资源网
css的基本选择器有哪些？
css的基本选择器有哪些？
33天前 23
5.9K⭐ 轻松搞定定时任务！Web管理超便捷-偶像资源网
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
33天前 23
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
33天前 4
评论 抢沙发

请登录后发表评论

    暂无评论内容