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>
我们可以仅使用以下一行选择器:
1
section>section:only-of-type {}
再次唠叨，你可以固执的为每个元素添加ID属性，但你会失去代码的可扩展性、维护性和绝对简洁的结构与表现相分离。CSS3的确能让我们可快速更方便的定位几乎所有没有ID和class属性的页面元素。
总结
我相信随着时间的推进和更多浏览器的支持，HTML5和CSS3将越来越受欢迎，它们将为web设计师们带来更无穷的能量，让我们的web前端更上一个台阶。
