巧妙地使用CSS選取器

來源:互聯網
上載者:User

可以通過不同規則來定義不同內容塊裡的連結樣式。類似這樣:#nav a:link或者 #main a:link或者#footer a:link。也可以定義不同內容塊中相同元素的樣式不一樣。例如,通過#main p和#sider p分別定義#main p和#sider p的樣式。從結構上講,你的頁面是由圖片、連結、列表、段落等組成的,這些元素本身並不會對顯示在什麼網路 裝置中(PDA還是手機或者網路電視)有影響,它們可以被定義為任何的表現外觀。

  一個仔細結構化的HTML頁面非常簡單,每一個元素都被用於結構目的。當你想縮排一個段落,不需要使用blockquote標籤,只要使用p標籤,並對p 加一個CSS的text-indent規則就可以實現縮排目的。p是結構化標籤,text-indent是表現屬性,前者屬於HTML,後者屬於CSS。(這就是傳說中的結構與表現相分離)

  良好結構的HTML頁面內幾乎沒有表現屬性的標籤。代碼非常乾淨簡潔。例如,原先的代碼<table width="778" cellpadding="3" border="0" align="center">,現在可以只在HTML中寫<table id="MrJin">,所有控製表現的東西都寫到CSS中去,在結構化的HTML中, table就是表格,而不是其他什麼(更不能被用來布局和定位)。

  當然,CSS選取器不只是這麼簡單,除了id還有class還有後代選取器,屬性選取器等等。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.