结构伪类选择器介绍

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

    1.Promise的含义 所谓Promise,就是一个对象,用来传递异步操作的消息. Promise对象有以下两个特点: 对象的状态不受外界影响.Promise对象代表一个异步操作,有三种状态:Pen ...

  2. Java容易搞错的知识点

    一.关于Switch 代码: Java代码 1         public class TestSwitch { 2             public static void main(Stri ...

  3. Libev源码分析09：select突破处理描述符个数的限制

    众所周知,Linux下的多路复用函数select采用描述符集表示处理的描述符.描述符集的大小就是它所能处理的最大描述符限制.通常情况下该值为1024,等同于每个进程所能打开的描述符个数. 增大描述符集 ...

  4. oracle用UNION-ALL 替换UNION ( 如果有可能的话)

    当SQL语句需要UNION两个查询结果集合时,这两个结果集合会以UNION-ALL的方式被合并, 然后在输出最终结果前进行排序. 如果用UNION ALL替代UNION, 这样排序就不是必要了. 效率 ...

  5. 2018-2-13-win10-uwp-ContentDialog-点确定不关闭

    title author date CreateTime categories win10 uwp ContentDialog 点确定不关闭 lindexi 2018-2-13 17:23:3 +08 ...

  6. java代码注释：单行//，多行/* */，文档注释/** */

    1.单行注释      //: //后到本行结束的所有字符会被编译器忽略; 2.多行注释     /* */: /*  */之间的所有字符会被编译器忽略 3.文档注释     /** */: 在/** ...

  7. vue 生成 二维码 qrCode 插件 使用 方法

    首先安装方法:(--save 参数会改变package.json 推荐使用 下次直接install就行了) npm install --save qrcode 然后项目使用: import QRCod ...

  8. Python--day23--面向对象思想求正方形面积

  9. Navicat for MySQL 使用SSH方式链接远程数据库

    第一步:ssh部分: 端口号:22 用户名为:在xshell中用来登录服务器的账号密码 第二步: 端口:3306 账号密码:在MySQL中的登录账号密码

  10. springmvc单Redis实例实现分布式锁(解决锁超时问题)

    一.前言 关于redis分布式锁, 查了很多资料, 发现很多只是实现了最基础的功能, 但是, 并没有解决当锁已超时而业务逻辑还未执行完的问题, 这样会导致: A线程超时时间设为10s(为了解决死锁问题 ...