利用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圆角效果完整代码
Oct 10 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 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正确配置mysql(apache环境)
2011/08/28 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
详解JavaScript 作用域
2020/07/14 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
python多线程编程中的join函数使用心得
2014/09/02 Python
Python中字典映射类型的学习教程
2015/08/20 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python编写分类决策树的代码
2017/12/21 Python
python字符串常用方法
2018/06/14 Python
python做反被爬保护的方法
2019/07/01 Python
python zip()函数使用方法解析
2019/10/31 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
机械电子工程毕业生自荐信
2013/11/23 职场文书
业务员岗位职责范本
2013/12/15 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript