利用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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 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批量生成缩略图的代码
2008/07/19 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
Django框架模板介绍
2019/01/15 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
党员入党表决心的话
2014/03/11 职场文书
紫日观后感
2015/06/05 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏