利用CSS3的定位页面元素


Posted in HTML / CSS onAugust 29, 2009

虽然我们已经使用CSS2.1选择器排除掉了所有的class和id,显然还会有很多更复杂的情况需要CSS3的高级选择器来解决。让我们通过完成一下的实例来了解一下如何在不使用无用的class和id属性的情况下利用CSS3定位页面元素。
相关下载:CSS3.0参考手册下载
使用一个唯一的日志(post)ID定位所有日志

wordpress提供给我们一种包含了ID的每篇日志的源代码输出。这种信息通常用于导航和/或了解资料的意图,不过CSS3可以利用这些唯一的ID来定义这些日志的样式。当然,你还可以像往常那样为每篇日志添加class=”post”这样的属性,但这就与我们练习的意图相冲突了(再加上它没有一点乐趣所在)。使用”子字符串匹配选择器”,我们就可以像下面这样定位所有日志和它们的不同元素了。

article[id*=post-] {} /* 定位所有日志 */
article[id*=post-] header h1 {} /* 定位所有日志中的h1标签 */
article[id*=post-] section p {} /* 定位所有日志中的p标签 */
我没仍然可以使用同样的方式定位评论的元素和它们的子元素。

article[id*=comment-] {} /* 定位所有评论 */
article[id*=comment-] header h1 {} /* 定位所有评论中的h1标签 */
article[id*=comment-] section p {} /* 定位所有评论中的p标签 */
定位一些指定的区域(section)或文章(article)

有很多博客的日志量和评论量都相当大,HTML 5 会将它们由<section>或<article>元素组成。为了定位哪些指定的<section>或<article>元素,我们就要转而使用强大的“:nth-child”选择器了:

section:nth-child(1) {} /* 选择第一个 <section> */
article:nth-child(1) {} /* 选择第一个 <article> */
section:nth-child(2) {} /* 选择第二个 <section> */
article:nth-child(2) {} /* 选择第二个 <article> */
同样,我们可以使用“:nth-last-child”选择器定位反序的一些元素。

section:nth-last-child(1) {} /* 选择最后一个 <section> */
article:nth-last-child(1) {} /* 选择最后一个 <article> */
section:nth-last-child(2) {} /* 选择倒数第二个 <section> */
article:nth-last-child(2) {} /* 选择倒数第二个 <article> */
使用更多的方式选择指定元素

另一种选择HTML5中指定元素(如header、section和footer)的方法就是利用”:only-of-type”选择器的优势。由于这些HTML5元素通常会在很多地方出现不止一次,所以当我们想定位那种在父元素下仅出现过一次的标签时这种方法很方便。例如,我们要选择的是在某元素中有切仅有的唯一一个元素,如以下代码:

复制代码
代码如下:

<section>
<section></section>
<section>
<section>定位这个section元素</section>
</section>
<section>
<section>定位这个section元素</section>
</section>
<section>
<section>但不定位这个section元素</section>
<section>和这个section元素</section>
</section>
<section></section>
</section>

我们可以仅使用以下一行选择器:
section>section:only-of-type {}

再次唠叨,你可以固执的为每个元素添加ID属性,但你会失去代码的可扩展性、维护性和绝对简洁的结构与表现相分离。CSS3的确能让我们可快速更方便的定位几乎所有没有ID和class属性的页面元素。

HTML / CSS 相关文章推荐
CSS3属性选择符介绍
Oct 17 HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 #HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 #HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 #HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 #HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 #HTML / CSS
HTML5 CSS3给网站设计带来出色效果
Jul 16 #HTML / CSS
CSS3 圆角效果
Jul 15 #HTML / CSS
You might like
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
使用Python对SQLite数据库操作
2017/04/06 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
python版飞机大战代码分享
2018/11/20 Python
Python代码太长换行的实现
2019/07/05 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
python如何调用php文件中的函数详解
2020/12/29 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
教育技术学专业职业规划书
2014/03/03 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
难忘的一天教学反思
2014/04/30 职场文书
四风对照检查材料范文
2014/09/27 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
遗愿清单观后感
2015/06/09 职场文书
大学生暑期实践报告
2015/07/13 职场文书
劳动模范获奖感言
2015/07/31 职场文书
600字作文之感受大自然
2019/11/27 职场文书