自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

CSS樣式表:詳解IE7新支持的選擇器

開發(fā) 前端
本文向大家介紹一下CSS樣式表:詳細介紹IE7新支持的選擇器,現(xiàn)在IE7已經(jīng)推出一段時間并且滲透到用戶當中,不用等太久我們就可以在頁面上使用更高級的CSS。

你知道IE7新支持的選擇器嗎,現(xiàn)在IE7已經(jīng)推出一段時間并且滲透到用戶當中,兩個最有用的項目將是Child子和AdjacentSibling相鄰兄弟選擇符。

CSS樣式表:詳細介紹IE7新支持的選擇器

現(xiàn)在IE7已經(jīng)推出一段時間并且滲透到用戶當中,不用等太久我們就可以在頁面上使用更高級的CSS。兩個最有用的項目將是Child子和AdjacentSibling相鄰兄弟選擇符?,F(xiàn)在已是時候使用它們制作網(wǎng)頁,并且更深入研究它們。

注意,選擇器包括現(xiàn)行的符號,“>”,“+”和空格(后代選擇符),涉及到子選擇器,相鄰兄弟選擇器,后代選擇器,統(tǒng)稱為選擇符。

一個較好的方法

在我們研究選擇符之前,弄清楚他們的不同和為什么它們是好東西的原因是個不錯的主意。原因很簡單,它減少網(wǎng)頁的“class-itis”弊病。主要原因就是“class-itis”在目前網(wǎng)頁中非常普遍,直到現(xiàn)在,我們擁有了為建立配合CSS選擇器而存在而且支持***的后代選擇符,即兩個選擇器之間空格。

◆當使用后代選擇符,右邊的一個元素選擇器是被選擇的,不管左邊的元素選擇器標簽有幾個。舉例,pa{color:red;},意思是段落里面的所有鏈接都是紅色。這非常有用,也是一類相當廣泛的選擇組合。

代表性的class-itis的級數(shù)像下面一樣。首先,你使用一個非常好的干凈的html結(jié)構(gòu)運用簡單的CSS樣式構(gòu)建標題、段落等等。然后有人告訴你每個div塊***段里文本顏色需要紅色。你不能僅改變目標段落的樣式,因為那可能影響全部,所以你被迫命名一個特殊class應(yīng)用在***段。

于是數(shù)十次相同的要求在后面繼續(xù),結(jié)果就形成了class-itis現(xiàn)象。為什么說這樣是糟糕有害的?因為這和font標簽比起來沒什么區(qū)別。當然,classes允許無窮的花樣,但是緊隨其后就是無窮的混亂,或可能更快勝于隨后。

舉個例子,假設(shè)你已經(jīng)給所有***段加上class屬性,而且一切都好。現(xiàn)在你被告知,首兩段需要樣式,不僅是***個。為使用正確class完成目的,你必須確信第二段的每個都有專用的class。***,這樣的習(xí)慣導(dǎo)致源代碼里到處都是class,感覺像新舊兩個樣式在打斗沖突,讓人頭痛。

如果我們只針對CSS講這樣未必不好,實際上“運用下列樣式到每個div塊***段和第二段里面。”這樣的情況發(fā)生了,***的CSS選擇符允許我們耍點小聰明就可辦到。

回顧復(fù)習(xí)下

讓我們復(fù)習(xí)一些術(shù)語。W3CCSS2.1規(guī)范解釋了選擇器(selectors)和選擇(combinators):

“一個選擇器是用選擇符連接起來的一個或更多的選擇器。選擇符包括:空格,‘>’和‘+’??崭窨赡艹霈F(xiàn)在一個選擇符和簡單的選擇器之間。”一個簡單的選擇器可以是一種類型選擇器或是通用選擇器跟隨零或者更多屬性選擇器,ID選擇器或者偽類,在任何順序。

◆***個支持的選擇符(也經(jīng)常被稱作選擇器,這是唯一正確的部分)是子選擇符。在簡單的選擇器之間指定“>”符號。一個簡單的例子,#leftcol>p{color:blue;},意思是#leftcol下面所有子段落文本顏色是藍色。

但是如果#leftcol有一個DIV,而且DIV還有一個段落,#left>p選擇器不會使這個段落里的文本變成藍色,因為子選擇符,不像頻繁使用的后代選擇符,只選擇直接的孩子,不是“>”符號的左邊元素任何深度的嵌套后代。

◆另外一個新支持的選擇符將是相鄰選擇符,使用"+"符號。子選擇符可以指向另外一個元素的子部,相鄰選擇符可以指向跟隨的元素,但與前面的元素獨立。例子,h2+p{color:blue;},跟隨h2元素后面段落的文本顏色為藍色。

現(xiàn)在你明白選擇符怎么工作,我們開始研究復(fù)雜聯(lián)合元素,看看我們能不能不使用class達到目的。

作者:JohnGallant,HollyBergevin翻譯:w3cpro.cn

原文地址:http://www.communitymx.com/content/article.cfm?cid=1C603

翻譯地址:http://www.w3cpro.cn/article/xhtmlcss/124.html

【編輯推薦】

  1. IE6不支持的五大CSS選擇符
  2. 探究IE8與IE7具體功能中窗口功能按鈕的變化
  3. IE6 IE7 IE8三個版本的CSS兼容速查手冊
  4. IE6下使用CSS定義DIV高度行之有效的辦法
  5. 技術(shù)前沿 一段JS代碼輕松解決IE6-IE8的兼容性問題

 

 

責任編輯:佚名 來源: communitymx.com
相關(guān)推薦

2010-09-14 14:10:36

CSS樣式表

2010-08-19 16:53:10

IE6IE7Firefox

2010-08-27 15:08:10

FirefoxIE6IE7

2010-08-19 09:09:53

FirefoxIECSS

2010-08-31 09:39:17

CSS樣式表

2010-08-20 11:24:44

IE7IE8CSS

2010-09-07 11:14:32

CSS屬性選擇器CSS

2010-09-06 15:06:29

IE6IE7Firefox

2010-08-19 16:38:33

IE6IE7Firefox

2010-08-26 11:19:31

CSS樣式表

2010-09-14 11:11:09

DIV+CSS樣式表

2010-09-08 16:59:48

CSS兼容IE7IE8

2010-08-18 10:24:51

IE6IE7IE8

2011-12-31 08:52:20

IE7Facebook

2009-08-13 10:12:07

IE的CSS Bug

2010-09-07 13:10:48

CSS樣式表CSS

2010-09-16 13:17:31

IE6IE7IE8

2010-08-19 09:24:20

CSS兼容IE7IE8

2010-09-06 14:11:32

CSS

2010-09-03 14:57:33

CSS樣式表CSS
點贊
收藏

51CTO技術(shù)棧公眾號