详解如何使用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 06 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
css3 文字断裂效果
Apr 22 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
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
Javascript Worker子线程代码实例
2020/02/20 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
python网络编程之数据传输UDP实例分析
2015/05/20 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
多个应用共存的Django配置方法
2018/05/30 Python
Python之修改图片像素值的方法
2019/07/03 Python
Python中函数的返回值示例浅析
2019/08/28 Python
python实现文件的分割与合并
2019/08/29 Python
python中count函数简单的实例讲解
2020/02/06 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
学校领导班子四风对照检查材料
2014/09/27 职场文书
学校食堂标语
2014/10/06 职场文书
护士旷工检讨书
2015/08/15 职场文书