详解如何使用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:"加油";里面。

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

HTML / CSS 相关文章推荐
对CSS3选择器的研究(详解)
Sep 16 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
HTML基础详解(下)
Oct 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
You might like
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
解决Python安装后pip不能用的问题
2018/06/12 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
运动会通讯稿300字
2014/02/02 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
食品安全标语
2014/06/07 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
导游词之河北野三坡
2019/12/11 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle