首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onJanuary 06, 2020

结构伪类选择器介绍

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

属性 描述
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>

结果图

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

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>

结果图

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

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>

结果图

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

使用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>

结果图

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

使用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>

结果图

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

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>

结果图

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

伪元素选择器介绍

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

属性 描述
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>

结果图

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

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>

结果图

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

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>

结果图

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

注意：添加的文本必须写在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>

结果图

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

微笑是最初的信仰

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
css3新特性的应用示例分析
Mar 16 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 #HTML / CSS
详解CSS3新增的背景属性
Dec 25 #HTML / CSS
CSS3实现缺角矩形，折角矩形以及缺角边框
Dec 20 #HTML / CSS
css3实现背景动态渐变效果
Dec 10 #HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 #HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 #HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 #HTML / CSS
协议书(568) 任命书(51) 计划(88) 说明书(38) 汇报材料(247) 党团范文(807) 标语(336) 报告(147) 工作总结(1972) 口号(179)
You might like
fsockopen pfsockopen函数被禁用，SMTP发送邮件不正常的解决方法
2015/09/20 PHP
php并发加锁示例
2016/10/17 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
python不带重复的全排列代码
2013/08/13 Python
Python的迭代器和生成器
2015/07/29 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
浅谈Python3中print函数的换行
2020/08/05 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
学生个人求职自荐信格式
2013/09/23 职场文书
银行财务部实习生的自我鉴定
2013/11/27 职场文书
小学生暑假感言
2014/02/06 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
优秀党员推荐材料
2014/12/18 职场文书
颐和园导游词
2015/01/30 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python