使用一個唯一的日志(post)ID定位所有日志
Wordpress提供給我們一種包含了ID的每篇日志的源代碼輸出。這種信息通常用於導航和/或了解資料的意圖，不過CSS3可以利用這些唯一的ID來定義這些日志的樣式。當然，你還可以像往常那樣為每篇日志添加class=”post”這樣的屬性，但這就與我們練習的意圖相沖突了(再加上它沒有一點樂趣所在)。使用”子字符串匹配選擇器”，我們就可以像下面這樣定位所有日志和它們的不同元素了。
1
2
3
article[id*=post-] {}
/* 定位所有日志 */
article[id*=post-] header h1 {}
/* 定位所有日志中的h1標簽 */
article[id*=post-] section p {}
/* 定位所有日志中的p標簽 */
我沒仍然可以使用同樣的方式定位評論的元素和它們的子元素。
1
2
3
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”選擇器了:
1
2
3
4
5
section
:nth-child(
1) {}
/* 選擇第一個 <section> */
article
:nth-child(
1) {}
/* 選擇第一個 <article> */
section
:nth-child(
2) {}
/* 選擇第二個 <section> */
article
:nth-child(
2) {}
/* 選擇第二個 <article> */
同樣，我們可以使用“:nth-last-child”選擇器定位反序的一些元素。
1
2
3
4
5
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元素通常會在很多地方出現不止一次，所以當我們想定位那種在父元素下僅出現過一次的標簽時這種方法很方便。例如，我們要選擇的是在某
元素中有切僅有的唯一一個
元素，如以下代碼:
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
section>section
:only-of-type {}
再次唠叨，你可以固執的為每個元素添加ID屬性，但你會失去代碼的可擴展性、維護性和絕對簡潔的結構與表現相分離。CSS3的確能讓我們可快速更方便的定位幾乎所有沒有ID和class屬性的頁面元素。