利用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
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
CSS的calc函数用法小结
Jun 25 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
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
php HTML无刷新提交表单
2016/04/05 PHP
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python tkinter基本属性详解
2019/09/16 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
群众路线党课主持词
2014/04/01 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
早读课迟到检讨书
2014/09/25 职场文书
离婚起诉书范本
2015/05/18 职场文书
个人售房合同协议书
2016/03/21 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技