利用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 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 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的面向对象编程
2006/10/09 PHP
一个颜色轮换的简单例子
2006/10/09 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
jQuery操作css样式
2017/05/15 jQuery
详解Angular操作cookies方法
2018/06/01 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
python 的列表遍历删除实现代码
2020/04/12 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python实现QQ批量登录功能
2019/06/19 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
农行实习自我鉴定
2013/09/22 职场文书
教师找工作推荐信
2013/11/23 职场文书
料理师求职信
2014/01/30 职场文书
业务员简历自我评价
2014/03/06 职场文书
学习型班组申报材料
2014/05/31 职场文书
英文导游词
2015/02/13 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript