结构伪类选择器介绍

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

    A*作为最常用的路径搜索算法,值得我们去深刻的研究.路径规划项目.先看一下维基百科给的算法解释:https://en.wikipedia.org/wiki/A*_search_algorithm A ...

  2. mysql数据库之存储引擎

    mysql存储引擎概述 什么是存储引擎?                                                               MYSQL中的数据用各不相同的技术 ...

  3. saltStack 配置管理(也就是替换文件)

    目录  /srv/salt/base下面新建一个文件dns.sls /opt/resolv.conf_bak:     #这个是文件替换的位置,也就说替换到远程文件的/opt/resolv.conf_ ...

  4. 微信授权登录-微信公众号和PC端网站

    https://blog.csdn.net/qq_34664239/article/details/79107529 一.微信公众号授权登录——微信公众平台 微信授权登录,并调用后台接口,获取用户信息 ...

  5. react组件之间的参数传递

    1.父组件向子组件传递参数 class Child extends Component { componentDidMount(){ let name = this.props.default; co ...

  6. Android 设置ImageView宽度固定，其高度按比例缩放适应

    今天和项目经理对喷了一下,他说在应用的列表数据中的图片应该宽度固定,高度按比例缩放自适应,我说,那岂不是很丑!直接让运营那边把图片处理成固定宽高比不就好了,省的我客户端麻烦了. 这家伙不同意,为毛呢, ...

  7. hdu 3264 Open-air shopping malls（圆相交面积+二分）

    Open-air shopping malls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/ ...

  8. activiti工作流引擎之uel表达式

    qq讨论群:313032825本人做了一个微信公众号,用于分享各类视频学习资源和我多年学习经验,喜欢的可以关注哦! 有了前面几章,我们肯定有一定的困惑,activiti如何与实际业务整合,比如一条采购 ...

  9. angularJS 初始化

    AngularJS 启动有两种方式 1.绑定初始化,自动加载 通过绑定来进行angular的初始化,会把js代码侵入到html中. ng-app是angular的一个指令,代表一个angular应用( ...

  10. SQL server无法绑定由多个部分绑定的标示符

    原因https://blog.csdn.net/wolfalcon/article/details/54578215给了我启发,原来有犯错在insert和update的使用上了对于已存在的表(表中有字 ...