《响应式Web设计:HTML5和CSS3实践指南》——2.9节基于位置伪类的交替行样式

简介:

本节书摘来自华章社区《响应式Web设计:HTML5和CSS3实践指南》一书中的第2章,第2.9节基于位置伪类的交替行样式,作者(美) Benjamin LaGrone,更多章节内容可以访问云栖社区“华章社区”公众号查看

2.9 基于位置伪类的交替行样式
对于那些在以前需要恼人且复杂的方案来解决的问题,CSS3中的位置伪类提供了极为简单的解决方案。直到最近,为了给列表或表格中的交替行添加样式,如果能够在服务器端添加一些处理逻辑,你至少可以通过计数器来遍历列表,更坏的情况是,你甚至得手动为你的行元素编号。

2.9.1 准备工作
CSS3所提供的解决方案非常简单。首先创建带有列表元素的HTML文件。给列表元素指定类并不是必需的,因为你可能想将该样式应用到整个网站:


e3c88d6a0bf52f593d86fee51de80d8a6ac3721b

2.9.2 实现方式
为列表元素添加相应的CSS属性,给奇数位置的

元素设置基于位置信息的伪类。该伪类的属性包括背景色,以及能够显著与默认字体颜色模式区分的字体色。


ae59c24b60a682ddb1ce429d5518c5118e580522

可以休息一下了,一切都很简单!

2.9.3 工作原理
依据http://www.w3.org上的定义,伪类符号:nth-of-type(an+b)表示元素在同一元素层次下有an+b-1个兄弟节点在其之前,n在文档树中表示零或任意正整数,除此之外,元素还得有对应的父元素。
这究竟意味着什么?这就是说,只要某元素在其父元素下拥有相似的兄弟元素,你就能够使用(–n+2)这样的公式来表示兄弟元素的最后两行,或者为了简便,直接使用even或odd代表奇偶子元素,然后就可以使用CSS来对这些元素添加样式。

相关文章
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
1352 10
|
12月前
|
前端开发 JavaScript API
给Web开发者的HarmonyOS指南01-文本样式
本系列教程适合 HarmonyOS 初学者,为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。
375 5
给Web开发者的HarmonyOS指南01-文本样式
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
368 6
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
223 5
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
1027 10
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
215 4
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
421 2
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术