利用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 选择器 基本选择器介绍
Jan 21 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
ThinkPHP3.1查询语言详解
2014/06/19 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python抓取京东图书评论数据
2014/08/31 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
extern是什么意思
2016/03/10 面试题
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技
python前后端自定义分页器
2022/04/13 Python