【响应式Web前端设计】CSS3伪类与伪元素的区别

首先先来看看伪类与伪元素的定义
w3c中对于它们是这么解释的

CSS中伪类与伪元素的概念是很容易混淆的,今天就来谈谈伪类与伪元素之间的区别
伪类:用于向某些选择器添加特殊的效果
伪元素:用于将特殊的效果添加到某些选择器
讲道理,可能我语文不好,我觉得这两句话是等价的
根本不能看出有什么区别
都是对某些选择器“加特技”

标准有这么一句话翻译过来是这样的
CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化
这话更抽象,其实意思就是对那些我们不能通过class、id等选择元素的补充

区别

这个区别我们需要一个例子来理解

This is a text

运行结果是如图

如果我们想要第一个em标签字体颜色变红怎么做呢
使用我们熟悉的伪类很简单

em:first-child {
color: red;
}

如果我们想要第一个em标签字体颜色变红怎么做呢
使用我们熟悉的伪类很简单

em:first-child {
color: red;
}

运行结果如图

但是如果不存在伪类我们怎么做呢
这是我们就需要为第一个em标签添加类

This is a text

em.first-child { color: red; } 可以实现同样的效果

还是这个例子
现在我想让这个段落的第一个字母变红
怎么做呢
这回我们需要使用伪元素

p::first-letter {
color: red;
}

李响Superb CSDN认证博客专家 机器学习 TensorFlow 图像处理
成为一名优秀的算法工程师⬆️ ,
目前还在读软件工程,
AI攻防、算法和深度学习方向,
微博同名❤️ :李响Superb,
(记得关注,有问题微博私信!)
我们一起努力呀!
已标记关键词 清除标记
目录 第1章 HTML 5简介 1 1.1 HTML历史与HTML 5 2 1.2 HTML 5的优势 6 1.3 HTML 5的基本结构和语法变化 8 1.4 本章小结 12 第2章 HTML 5的常用元素与属性 14 2.1 HTML 5保留的常用元素 15 2.2 HTML 5增强的iframe元素 34 2.3 HTML 5保留的通用属性 40 2.4 HTML 5新增的通用属性 44 2.5 HTML 5新增的结构元素 48 2.6 HTML 5新增的语义元素 55 2.7 HTML 5头部和元信息 59 2.8 HTML 5新增的拖放API 63 2.9 本章小结 71 第3章 HTML 5表单相关的元素和属性 72 3.1 HTML原有的表单及表单控件 73 3.2 HTML 5新增的表单属性 83 3.3 HTML 5新增的表单元素 90 3.4 HTML 5新增的客户端校验 96 3.5 本章小结 100 第4章 HTML 5的绘图支持 101 4.1 使用canvas元素 102 4.2 绘图 103 4.3 坐标变换 118 4.4 控制叠加风格 123 4.5 控制填充风格 124 4.6 位图处理 128 4.7 输出位图 132 4.8 动画制作 133 4.9 本章小结 136 第5章 HTML 5的多媒体支持 137 5.1 使用audio和video元素 138 5.2 使用JavaScript脚本控制媒体播放 141 5.3 事件监听 144 5.4 track元素 146 5.5 本章小结 149 第6章 级联样单与CSS选择器 150 6.1 样单概述 151 6.2 CSS单的基本使用 152 6.3 CSS选择器 158 6.4 元素选择器 167 6.5 CSS 3新增的选择器 176 6.6 在脚本中修改显示样 195 6.7 本章小结 197 第7章 字体与文本相关属性 198 7.1 字体相关属性 199 7.2 CSS 3支持的颜色表示方法 205 7.3 文本相关属性 206 7.4 CSS 3新增的服务器字体 212 7.5 本章小结 215 第8章 背景、边框和边距相关属性 216 8.1 盒模型简介 217 8.2 背景相关属性 217 8.3 使用渐变背景 226 8.4 边框相关属性 239 8.5 使用opacity控制透明度 246 8.6 padding和margin相关属性 247 8.7 本章小结 249 第9章 大小、定位、轮廓相关属性 250 9.1 width、height相关属性 251 9.2 定位相关属性 255 9.3 轮廓相关属性 257 9.4 用户界面和滤镜属性 258 9.5 本章小结 263 第10章 盒模型与布局相关属性 264 10.1 盒模型和display属性 265 10.2 对盒添加阴影 275 10.3 布局相关属性 278 10.4 CSS 3新增的多栏布局 285 10.5 使用弹性盒布局 289 10.6 本章小结 306 第11章 表格、列表相关属性及media query 307 11.1 表格相关属性 308 11.2 列表相关属性 313 11.3 控制光标的属性 316 11.4 media query和响应布局 317 11.5 本章小结 323 第12章 变形与动画相关属性 324 12.1 CSS 3提供的变形支持 325 12.2 CSS 3新增的3D变换 337 12.3 CSS 3提供的Transition动画 341 12.4 CSS 3提供的Animation动画 345 12.5 本章小结 349 第13章 JavaScript语法详解 350 13.1 JavaScript简介 351 13.2 数据型和变量 356 13.3 基本数据364 13.4 复合376 13.5 运算符 381 13.6 语句 391 13.7 流程控制 395 13.8 函数 403 13.9 函数的参数处理 425 13.10 面向对象 429 13.11 创建对象 437 13.12 本章小结 443 第14章 DOM编程详解 444 14.1 DOM模型概述 445 14.2 DOM模型和HTML文档 446 14.3 访问HTML元素 448 14.4 修改HTML元素 456 14.5 增加HTML元素 458 14.6 删除HTML元素 463 14.7 传统的DHTML模型 467 14.8 使用window对象 469 14.9 navigator和地理定位 479 14.10 HTML 5增强的History API 485 14.11 使用document对象 490 14.12 HTML 5新增的浏览器分析 493 14.13 本章小结 496 第15章 事件处理机制 497 15.1 事件模型的基本概念 498 15.2 绑定事件处理函数 499 15.3 事件处理函数的执行环境 505 15.4 事件型 521 15.5 本章小结 534 第16章 本地存储与离线应用 535 16.1 Web Storage 536 16.2 Indexed数据库API 545 16.3 离线应用 564 16.4 本章小结 571 第17章 文件支持与二进制数据 572 17.1 HTML 5增强的文件上传域 573 17.2 ArrayBuffer与TypedArray 578 17.3 Blob 583 17.4 本章小结 587 第18章 Web Worker多线程API 588 18.1 使用Worker创建多线程 589 18.2 与Worker线程进行数据交换 591 18.3 Worker线程嵌套 594 18.4 使用SharedWorker创建共享线程 597 18.5 Promise 603 18.6 本章小结 611 第19章 客户端通信 612 19.1 跨文档消息传递 613 19.2 使用WebSocket与服务器通信 621 19.3 使用Server-Sent Events API 630 19.4 使用Beacon 635 19.5 本章小结 636 第20章 HTML 5的疯狂俄罗斯方块 637 20.1 俄罗斯方块简介 638 20.2 开发游戏界面 639 20.3 俄罗斯方块的数据模型 640 20.4 实现游戏逻辑 644 20.5 本章小结 654
相关推荐
这不是一本单纯讲解前端编程技巧的书,而是一本注重思想提升和内功修炼的书。 全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。 全书共7章,内容从逻辑上大致可以分为两大: 第一,偏向实践,围绕HTML、CSS、JavaScript等传统前端技术,以及PWA等新兴前端技术,讲解如何进行HTML优化、CSS优化、JavaScript优化、页面优化等,以此帮助前端工程师们提升高效编程和应用优化的能力。 第二,注重基础,讲解了前端工程师必须掌握的数据处理、网络协议、文件操作、测试等基础性的开发技,目的是帮助前端工程师们修炼内功,打下扎实的基础。 希望通过本书,不仅能帮助前端工程师们夯实基础,而且还能写出简洁、优美的代码,为应用带来良好的用户体验。 第1章 HTML/CSS优化 1 Effective前端1:能用HTML/CSS 解决的问题就不要用JS 2 Effective前端2:优化HTML标签 16 Effective前端3:用CSS画一个三角形 22 Effective前端4:尽可能地使用元素 28 第2章 JS优化 34 Effective前端5:减少前端代码耦合 34 Effective前端6:JS书写优化 47 第3章 页面优化 59 Effective前端7:避免页面卡顿 59 Effective前端8:加快页面打开速度 67 Effective前端9:增强用户体验 85 Effective前端10:用好Chrome Devtools 91 第4章 HTML5优化实践 109 Effective前端11:使用H5的history改善AJAX列表请求体验 109 Effective前端12:使用图标替代雪碧图 118 Effective前端13:理解和使用CSS3动画 128 Effective前端14:实现前端裁剪压缩图片 136 Effective前端15:实现跨浏览器的HTML5表单验证 145 Effective前端16:使用Service Worker做一个PWA离线网页应用 151 第5章 前端与计算机基础 164 Effective前端17:理解WebSocket和TCP/IP 164 Effective前端18:理解HTTPS连接的前几毫秒发生了什么 185 Effective前端19:弄懂为什么0.1+ 0.2不等于0.3 203 Effective前端20:明白WebAssembly与程序编译 209 Effective前端21:理解JS与多线程 221 Effective前端22:学会JS与面向对象 231 Effective前端23:了解SQL 248 Effective前端24:学习常用的前端算法与数据结构 266 第6章 掌握前端基础 291 Effective前端25:掌握同源策略和跨域 291 Effective前端26:掌握前端本地文件操作与上传 299 Effective前端27:学会常用的CSS居中方 310 Effective前端28:学会常用的CSS布局技术 320 Effective前端29:理解字号与行高 327 Effective前端30:使用响应开发 336 Effective前端31:明白移动端click及自定义事件 344 Effective前端32:学习JS高级技巧 355 第7章 运用恰当的工具 372 Effective前端33前端的单元测试与自动化测试 372 Effective前端34:使用AE + bodymovin制作网页动画 390
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值