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

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

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

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

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

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

可以休息一下了，一切都很简单！

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

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

[书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
写在前面书籍介绍:本书主要讲解了如何运用HTML5和CSS3来进行响应式Web设计,使页面的设计与开发根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)来进行相应的响应和调整. 我的简评:响 ...
响应式Web设计读书笔记与实践
前段时间在微博上看到了几个在当今前端圈中的大牛的撕逼大战,作为一个前端小白来说就只是看热闹的,热闹中看到了两本书,<无懈可击的Web设计>和<响应式Web设计>,前者没有买到纸 ...
《响应式web设计》读书笔记（一）入门
写在开始之前 2013年的夏天,我算是正式加入了前端开发的队伍,作为一名新手,关注了很多知名网站.牛人博客,时时刻刻感觉要学的东西太多太多,一路不断的收藏收藏,攒了好多文章来看,心里还想着在前端世界里 ...
HTML5和CSS3响应式WEB设计指南译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...
响应式Web设计：HTML5和CSS3实战读书笔记
响应式Web设计:HTML5和CSS3实战 Responsive Web Design with HTML5 and CSS3 By : Pandao pandao####vip.qq.com ...
CSS3: Media Query实现响应式Web设计
十一长假已然过去了一大半.今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子.自从不再是学生,对每年的几次长假就无比珍惜,想方设法让每一天都尽量过的饱满一些:夜里闭上 ...
响应式web设计之CSS3 Media Queries
开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...
《响应式Web设计实践》一1.2　设备来了，设备来了
本节书摘来异步社区<响应式Web设计实践>一书中的第1章,第1.2节,作者: [美]Tim Kadlec 译者: 侯鸿儒责编: 赵轩,更多章节内容可以访问云栖社区"异步社区&q ...
《响应式Web设计实践》一2.1 布局选项
本节书摘来异步社区<响应式Web设计实践>一书中的第2章,第2.1节,作者: [美]Tim Kadlec 译者: 侯鸿儒责编: 赵轩,更多章节内容可以访问云栖社区"异步社区&q ...

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

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

最新文章

热门文章