不使用class和id進(jìn)行網(wǎng)頁(yè)布局的方法

發(fā)布時(shí)間：2009-08-29 20:36:44 作者：佚名

即使沒(méi)有那些高級(jí)的CSS選擇器，我們?nèi)匀豢梢酝ㄟ^(guò)強(qiáng)大的HTML5條調(diào)用不同的容器而不勞駕class和id這類屬性.

結(jié)合了富有新的語(yǔ)義化標(biāo)記的HTML5，CSS3為web設(shè)計(jì)師們的網(wǎng)頁(yè)提供了神一般的力量。有了HTML5的能量，我們將得到更多的對(duì)文檔代碼的控制權(quán)，有了CSS3的能量，我們的控制權(quán)將趨于無(wú)窮大！
　　即使沒(méi)有那些高級(jí)的CSS選擇器，我們?nèi)匀豢梢酝ㄟ^(guò)強(qiáng)大的HTML5條調(diào)用不同的容器而不勞駕class和id這類屬性。像以往的DIV布局，我們?cè)赾ss中可能要這樣調(diào)用:

div#news {}
div.section {}
div.article {}
div.header {}
div.content {}
div.footer {}
div.aside {}

我們?cè)賮?lái)看看基于HTML5的實(shí)例:

section {}
article {}
header {}
footer {}
aside {}

　　這是個(gè)進(jìn)步，但仍有一些問(wèn)題需要解決。在<div>實(shí)例中，我們需要通過(guò)class或id屬性來(lái)調(diào)用頁(yè)面中的元素。這種邏輯將允許我們將樣式應(yīng)用到文檔中的任何一個(gè)元素上，無(wú)論是整體還是個(gè)體。例如在<div>實(shí)例中，.section 和 .content元素很容易定位。但是在HTML5實(shí)例中，實(shí)際文檔中會(huì)有很多個(gè)section元素。其實(shí)我們可以添加一些特定的屬性選擇器來(lái)調(diào)用那些不同的section元素，不過(guò)謝天謝地，我沒(méi)現(xiàn)在可以用少量的高級(jí)CSS選擇器來(lái)定位不同的section元素。

　下面讓我們來(lái)看看如何在不使用class和id的情況下定位HTML5頁(yè)面元素的一個(gè)實(shí)例，我們可以使用三種CSS選擇器來(lái)定位和辨別實(shí)例中的元素。如下:

后代選擇器:[CSS 2.1]: E F
兄弟選擇器:[CSS 2.1]: E + F
子元素選擇器:[CSS 2.1]: E > F
下面讓我們來(lái)看看如何不使用class和id而完成對(duì)文檔中的那些section元素的定位吧:

定位最外層的<section>元素

　　考慮到我們的例子并不是一套完整的HTML5代碼，所以我們假定在<body>元素下有個(gè)<nav>元素與<section>元素是兄弟元素。這樣的話，我們就可以向下面代碼那樣定位最外層的<section>了:

body nav+section {}

定位下一個(gè)<section>元素
作為最外層<section>元素下的唯一直屬子集元素，這個(gè)<section>元素也許可以這樣定位:

section>section {}

定位<article>元素
可以定位<article>元素的方法有很多，不過(guò)最簡(jiǎn)單的方法當(dāng)然就是后代選擇器了:

section section article {}

定位<header>、<section>和<footer>元素
這三個(gè)元素分別在兩個(gè)地方都出現(xiàn)過(guò)，一是在<article>元素中出現(xiàn)，另一是在<aside>元素中出現(xiàn)。這種差別能讓我們輕松定位每個(gè)元素。

article header {}
article section {}
article footer {}

或者一起定義:

section section header {}
section section section {}
section section footer {}
到目前為止，我們已經(jīng)使用CSS2.1選擇器排除掉了所有的class和id。那么我們?yōu)槭裁催€需要使用CSS3呢？我很高興你能這么問(wèn)…