结构伪类选择器介绍

  • 结构伪类选择器是用来处理一些特殊的效果。
  • 结构伪类选择器属性说明表
属性 描述
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>

  • 结果图

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>

  • 结果图

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>

  • 结果图

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

  • 结果图

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

  • 结果图

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>

  • 结果图

伪元素选择器介绍

  • 伪元素主要作用就是操作元素的文本和添加内容。
  • 伪元素使用说明表
属性 描述
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>

  • 结果图

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>

  • 结果图

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>

  • 结果图

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

  • 结果图

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

如何使用CSS3中的结构伪类选择器和伪元素选择器的更多相关文章

  1. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  2. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  3. 关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用

    伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px ...

  4. 转贴：CSS伪类与CSS伪元素的区别及由来具体说明

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  5. 前端（六）—— 伪类选择器：a标签的伪类、内容伪类、索引伪类、取反伪类

    a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...

  6. CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit

      伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":&q ...

  7. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

    后代选择器 祖先元素 后代元素{ } 子元素选择器(直接子元素选择器) 父元素>子元素{ } 兄弟选择器 元素+兄弟元素(紧邻该元素之后的下一个兄弟元素) 所有兄弟元素选择器 元素~兄弟元素(该 ...

  9. CSS中的伪类和为伪元素

    伪类: 伪元素:

随机推荐

  1. @loj - 2196@「SDOI2014」Lis

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定序列 A,序列中的每一项 Ai 有删除代价 Bi 和附加属性 ...

  2. 割点(tarjan)

    对于根来说,如果它有超过1棵子树,那么它是一个割点 对于非叶结点来说,如果它的某一个儿子没有回边能到达高于它的点,那么它是一个割点 叶节点不是割点 //洛谷3388 #include<algor ...

  3. 解析xml的方式

    1.DOM 理论:将标记文档语言一次性加载进内存,在内存中形成DOM树. 优点:操作方便,可以对文档进行CRUD(增删改查)操作,适用于服务端操作 缺点:占内存,不适用与手机,智能家居等内存容量小的设 ...

  4. 我爱自然语言处理bert ner chinese

    BERT相关论文.文章和代码资源汇总 4条回复 BERT最近太火,蹭个热点,整理一下相关的资源,包括Paper, 代码和文章解读. 1.Google官方: 1) BERT: Pre-training ...

  5. 洛谷P5022 旅行 题解 去环/搜索

    题目链接:https://www.luogu.org/problem/P5022 这道题目一开始看的时候没有思路,但是看到数据范围里面有一个: \(m = n-1\) 或 \(m = n\) ,一下子 ...

  6. 在linux上安装pear

    在搭建centreon的过程中,需要pear模块支持. 什么是pear pear是PHP扩展与应用库(the PHP Extension and Application Repository)的缩写. ...

  7. Python--day62--ORM的使用

    4.Django里ORM的使用 1,手动创建数据库 2,在settings.py里面,配置数据库的连接信息 3,在项目/__init__.py告诉Django用pymysql模块代替MySQLdb(不 ...

  8. uva 562 Dividing coins（01背包）

      Dividing coins  It's commonly known that the Dutch have invented copper-wire. Two Dutch men were f ...

  9. linux scull 中的缺陷

    让我们快速看一段 scull 内存管理代码. 在写逻辑的深处, scull 必须决定它请求的内 存是否已经分配. 处理这个任务的代码是: if (!dptr->data[s_pos]) { dp ...

  10. 大众点评实时监控系统CAT的那些坑

    首先,感谢大众点评开源监控系统CAT.CAT是一款非常使用的功能建全的监控系统.作为一个知名的开源软件,真的是太差了. 想把CAT用起来,没有多年的Java经验是不行的.先吐槽一下,再写一篇如何用的文 ...