使用CSS3對HTML5元素進(jìn)行高級定位
雖然我們已經(jīng)使用CSS2.1選擇器排除掉了所有的class和id，顯然還會有很多更復(fù)雜的情況需要CSS3的高級選擇器來解決。讓我們通過完成一下的實(shí)例來了解一下如何在不使用無用的class和id屬性的情況下利用CSS3定位頁面元素。
使用一個(gè)唯一的日志(post)ID定位所有日志
wordpress提供給我們一種包含了ID的每篇日志的源代碼輸出。這種信息通常用于導(dǎo)航和/或了解資料的意圖，不過CSS3可以利用這些唯 一的ID來定義這些日志的樣式。當(dāng)然，你還可以像往常那樣為每篇日志添加class=”post”這樣的屬性，但這就與我們練習(xí)的意圖相沖突了(再加上它 沒有一點(diǎn)樂趣所在)。使用”子字符串匹配選擇器”，我們就可以像下面這樣定位所有日志和它們的不同元素了。
|
1
2
3 |
article[id*=post-] {} /* 定位所有日志 */
article[id*=post-] header h1 {} /* 定位所有日志中的h1標(biāo)簽 */
article[id*=post-] section p {} /* 定位所有日志中的p標(biāo)簽 */ |
我沒仍然可以使用同樣的方式定位評論的元素和它們的子元素。
|
1
2
3 |
article[id*=comment-] {} /* 定位所有評論 */
article[id*=comment-] header h1 {} /* 定位所有評論中的h1標(biāo)簽 */
article[id*=comment-] section p {} /* 定位所有評論中的p標(biāo)簽 */ |
定位一些指定的區(qū)域(section)或文章(article)
有很多博客的日志量和評論量都相當(dāng) 大，HTML 5 會將它們由<section>或<article>元素組成。為了定位哪些指定的<section> 或<article>元素，我們就要轉(zhuǎn)而使用強(qiáng)大的“:nth-child”選擇器了:
|
1
2
3
4
5 |
section:nth-child(1) {} /* 選擇第一個(gè) <section> */
article:nth-child(1) {} /* 選擇第一個(gè) <article> */
section:nth-child(2) {} /* 選擇第二個(gè) <section> */
article:nth-child(2) {} /* 選擇第二個(gè) <article> */ |
同樣，我們可以使用“:nth-last-child”選擇器定位反序的一些元素。
|
1
2
3
4
5 |
section:nth-last-child(1) {} /* 選擇最后一個(gè) <section> */
article:nth-last-child(1) {} /* 選擇最后一個(gè) <article> */
section:nth-last-child(2) {} /* 選擇倒數(shù)第二個(gè) <section> */
article:nth-last-child(2) {} /* 選擇倒數(shù)第二個(gè) <article> */ |
使用更多的方式選擇指定元素
另一種選擇HTML5中指定元素(如header、section和 footer)的方法就是利用”:only-of-type”選擇器的優(yōu)勢。由于 這些HTML5元素通常會在很多地方出現(xiàn)不止一次，所以當(dāng)我們想定位那種在父元素下僅出現(xiàn)過一次的標(biāo)簽時(shí)這種方法很方便。例如，我們要選擇的是在某元素中 有切僅有的唯一一個(gè)元素，如以下代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<section>
<section></section>
<section>
<section>定位這個(gè)section元素</section>
</section>
<section>
<section>定位這個(gè)section元素</section>
</section>
<section>
<section>但不定位這個(gè)section元素</section>
<section>和這個(gè)section元素</section>
</section>
<section></section>
</section> |
我們可以僅使用以下一行選擇器:
|
1 |
section>section:only-of-type {} |
再次嘮叨，你可以固執(zhí)的為每個(gè)元素添加ID屬性，但你會失去代碼的可擴(kuò)展性、維護(hù)性和絕對簡潔的結(jié)構(gòu)與表現(xiàn)相分離。CSS3的確能讓我們可快速更方便的定位幾乎所有沒有ID和class屬性的頁面元素。
總結(jié)
我相信隨著時(shí)間的推進(jìn)和更多瀏覽器的支持，HTML5和CSS3將越來越受歡迎，它們將為web設(shè)計(jì)師們帶來更無窮的能量，讓我們的web前端更上一個(gè)臺階。
上一頁 [1] [2] [3] |
您現(xiàn)在的位置： 
