標簽。這種語義化的特性不僅提升了我們網頁的質量和語義，并且大量減少了曾經代碼中用于CSS必須調用的class和id屬性。事實上，CSS3也是可以然通過我們忽略掉所有 class和id的。 跟class屬性說再
見，歡迎整潔的標簽
結合了富有新的語義化標記的HTML5，CSS3為web設計師們的網頁提供了神一般的力量。有了HTML5的能量，我們將得到更多的對文檔代碼的控制權，有了CSS3的能量，我們的控制權將趨于無窮大！
即使沒有那些高級的CSS選擇器，我們仍然可以通過強大的HTML5條調用不同的容器而不勞駕class和id這類屬性。像以往的DIV布局，我們在css中可能要這樣調用:
|
1
2
3
4
5
6
7 |
div#news {}
div.section {}
div.article {}
div.header {}
div.content {}
div.footer {}
div.aside {} |
我們再來看看基于HTML5的實例:
|
1
2
3
4
5 |
section {}
article {}
header {}
footer {}
aside {} |
這是個進步，但仍有一些問題需要解決。在<div>實例中，我們需要通過class或id屬性來調用頁面中的元素。這種邏輯將允許 我們將樣式應用到文檔中的任何一個元素上，無論是整體還是個體。例如在<div>實例中，.section 和 .content元素很容易定位。但是在HTML5實例中，實際文檔中會有很多個section元素。其實我們可以添加一些特定的屬性選擇器來調用那些不 同的section元素，不過謝天謝地，我沒現在可以用少量的高級CSS選擇器來定位不同的section元素。
不使用class和id定位HTML-5元素
下面讓我們來看看如何在不使用class和id的情況下定位HTML5頁面元素的一個實例，我們可以使用三種CSS選擇器來定位和辨別實例中的元素。如下:
- 后代選擇器:[CSS 2.1]: E F
- 兄弟選擇器:[CSS 2.1]: E + F
- 子元素選擇器:[CSS 2.1]: E > F
下面讓我們來看看如何不使用class和id而完成對文檔中的那些section元素的定位吧:
定位最外層的<section>元素
考慮到我們的例子并不是一套完整的HTML5代碼，所以我們假定在<body>元素下有個<nav>元素與<section>元素是兄弟元素。這樣的話，我們就可以向下面代碼那樣定位最外層的<section>了:
定位下一個<section>元素
作為最外層<section>元素下的唯一直屬子集元素，這個<section>元素也許可以這樣定位:
定位<article>元素
可以定位<article>元素的方法有很多，不過最簡單的方法當然就是后代選擇器了:
|
1 |
section section article {} |
定位<header>、<section>和<footer>元素
這三個元素分別在兩個地方都出現過，一是在<article>元素中出現，另一是在<aside>元素中出現。這種差別能讓我們輕松定位每個元素。
|
1
2
3 |
article header {}
article section {}
article footer {} |
或者一起定義:
|
1
2
3 |
section section header {}
section section section {}
section section footer {} |
到目前為止，我們已經使用CSS2.1選擇器排除掉了所有的class和id。那么我們為什么還需要使用CSS3呢？我很高興你能這么問…
上一頁 [1] [2] [3] 下一頁
您現在的位置： 
