利用CSS3定位页面元素

2016-02-20 00:11 3 1 收藏

下面是个利用CSS3定位页面元素教程，撑握了其技术要点，学起来就简单多了。赶紧跟着图老师小编一起来看看吧！

【 tulaoshi.com - Web开发】

　虽然我们已经使用CSS2.1选择器排除掉了所有的class和id，显然还会有很多更复杂的情况需要CSS3的高级选择器来解决。让我们通过完成一下的实例来了解一下如何在不使用无用的class和id属性的情况下利用CSS3定位页面元素。

相关文章：CSS3.0参考手册下载（Webjx推荐）

使用一个唯一的日志(post)ID定位所有日志

　　wordpress提供给我们一种包含了ID的每篇日志的源代码输出。这种信息通常用于导航和/或了解资料的意图，不过CSS3可以利用这些唯一的ID来定义这些日志的样式。当然，你还可以像往常那样为每篇日志添加class=post这样的属性，但这就与我们练习的意图相冲突了(再加上它没有一点乐趣所在)。使用子字符串匹配选择器，我们就可以像下面这样定位所有日志和它们的不同元素了。

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/） 1
2
3
article[id*=post-] {} /* 定位所有日志 */
article[id*=post-] header h1 {} /* 定位所有日志中的h1标签 */
article[id*=post-] section p {}

我没仍然可以使用同样的方式定位评论的元素和它们的子元素。

1
2
3
article[id*=comment-] {} /* 定位所有评论 */
article[id*=comment-] header h1 {} /* 定位所有评论中的h1标签 */
article[id*=comment-] section p {}

定位一些指定的区域(section)或文章(article)
　　有很多博客的日志量和评论量都相当大，HTML 5 会将它们由section或article元素组成。为了定位哪些指定的section或article元素，我们就要转而使用强大的:nth-child选择器了:

1
2
3
4
5
sectionchild() {} /* 选择第一个 section */
articlechild() {} /* 选择第一个 article */

sectionchild() {} /* 选择第二个 section */
articlechild() {}

同样，我们可以使用:nth-last-child选择器定位反序的一些元素。

1
2
3
4
5
sectionchild() {} /* 选择最后一个 section */
articlechild() {} /* 选择最后一个 article */

sectionchild() {} /* 选择倒数第二个 section */
articlechild() {}

使用更多的方式选择指定元素
　　另一种选择HTML5中指定元素(如header、section和footer)的方法就是利用:only-of-type选择器的优势。由于这些HTML5元素通常会在很多地方出现不止一次，所以当我们想定位那种在父元素下仅出现过一次的标签时这种方法很方便。例如，我们要选择的是在某

元素中有切仅有的唯一一个

元素，如以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
section
section/section
section
section定位这个section元素/section
/section
section
section定位这个section元素/section
/section
section
section但不定位这个section元素/section
section和这个section元素/section
/section
section/section
/section

我们可以仅使用以下一行选择器:

1
sectionsection{}

　　再次唠叨，你可以固执的为每个元素添加ID属性，但你会失去代码的可扩展性、维护性和绝对简洁的结构与表现相分离。CSS3的确能让我们可快速更方便的定位几乎所有没有ID和class属性的页面元素。

来源:http://www.tulaoshi.com/n/20160220/1631449.html

上一篇： CSS网页布局应该避免滥用div元素
下一篇： Win8应用商店安装程序挂起无法正常安装

看过《利用CSS3定位页面元素》的人还看了以下文章更多>>

CSS教程：详解CSS3 Media Queries

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

说起CSS3的新特性，就不得不提到 Media Queries 。本文比较详细，所以很多实际中用不到。所以如果只是想简单了解Media Queries，推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持设备，可能略显过时的电视机等等。 ...

css教程：CSS3 Media Queries 详解

标签： Web开发

跨浏览器的CSS3产生器:CSS3 please

标签： Web开发

你是否为CSS3中那些形如-moz-border-radius这样冗长的前缀而头晕呢？你是否在考虑跨浏览器使用CSS3的时候，要记住哪些前缀是支持哪个浏览器的？你是否想过有什么办法能一劳永逸的（或者便捷的）解决这些问题？不用发愁了，Paul Irish与朋友制作了一个有意思的CSS3生成器，在这个页面上你可以实时的编辑CSS3样式，并且立即可以看到效果...

CSS3 有关的问题

标签： Web开发

Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解，他是这个领域杰出的专家，曾写过不少 CSS 方面的书，是 An Event Apart 的合伙创始人，A List Apart 团队成员，还是 Complex Spiral Consulting 的创始人。另外， Eric Meyer 7年来一直是 CSS Working Group 资格深获邀专家，他们负责维护和开发 CSS。不用说，如果要找...

CSS3系列教程:阴影

标签： Web开发

阴影大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。阴影在CSS3中可以应用在边框和文字上，就像图片的阴影效果一样。一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y轴 Cpx = 投影长度 #XXX = 像通常一样的颜色了解了这些，...

查看更多精彩>>