结构伪类选择器介绍

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

    目前看着比较顺眼的notepad++配置,记录如下:

  2. BigData NoSQL —— ApsaraDB HBase数据存储与分析平台概览

    一.引言 时间到了2019年,数据库也发展到了一个新的拐点,有三个明显的趋势: 越来越多的数据库会做云原生(CloudNative),会不断利用新的硬件及云本身的优势打造CloudNative数据库, ...

  3. postman 中post方式提交数据

    post方式提交数据时,把参数填写在body中而不是pOST下面的哪一行

  4. 将 vue.js 获取的 html 文本转化为纯文本

    我存入数据表中的数据是使用 html  格式,获取数据是使用 vue 获取. 遇到了一个问题,就是界面上显示的数据是 html 格式的,但是我需要它显示纯文本. 怎么做呢?首先在  js  中写一个将 ...

  5. jquery实用应用之jquery操作radio、checkbox、select

    本文收集一些jquery的实用技巧,非常实用的哦,其中对radio.checkbox.select选中与取值的方法. 获取一组radio被选中项的值var item = $('input[@name= ...

  6. Java反射机制（四）：动态代理

    一.静态代理 在开始去学习反射实现的动态代理前,我们先需要了解代理设计模式,那何为代理呢? 代理模式: 为其他对象提供一种代理,以控制对这个对象的访问. 先看一张代理模式的结构图: 简单的理解代理设计 ...

  7. Python--day63--添加书籍

    添加书籍的代码:

  8. axis2 wsdl2java工具

    wsdl2java工具使用方法描述: C:\Users\Administrator>wsdl2java -h Using AXIS2_HOME: E:\Apache_Projects\axis2 ...

  9. Python--day60--一个简单（不完整）的web框架

  10. 代码片段 Powershell修改桌面壁纸

    其实只不过是利用了win32函数 function Set-Wallpaper($image){ $source = @" using System; using System.Runtim ...