1、元素選擇器最常見acss選擇器當屬元素選擇器了，在HTML文檔中該選擇器通常是指某種HTML元素，例如：p,h2,span,a,div乃至htmL例如：htkvtl{background-color:black;}p{font-size： backgroud-color:gray;}人2{background-color：red;}以上css代碼會對整個文檔添加黑色背景；將所有p元素字體大小設(shè)置為30像素同時添加灰色背景；對文檔中所有h2元素添加紅色背景。通過上面的例子也可以看出css的基本規(guī)則結(jié)構(gòu)：由選擇器和聲明塊組成。每個聲明塊中包含一個或多個聲明。每個聲明的格式為：屬性名：屬性值。每條聲明以分號";"結(jié)尾。如果在一個聲明中使用了不正確的屬性值，或者不正確的屬性，則該條聲明會被忽略掉。另外請注意不要忘記每條聲明后面的分號。我們也可以同時對多個html元素進行聲明：k工,人2,卜3,p{font-family:黑體這樣會將文檔中所有的hl-h6以及p元素字體設(shè)置為"黑體"。如果我們希望一鍋粥地選取所有的元素，可以使用通配符"*":*{font-size:2.Opx-.]這樣所有的元素都將被選中，雖然font-size屬性對于某些元素是無效的，那么它將被忽略。2、類選擇器單純的元素選擇器似乎還過于粗糙了，比如我們希望在文檔中突出加粗顯示某種重要的內(nèi)容，例如稿件的截至日期。問題在于我們不能確定稿件的截至日期將會出現(xiàn)在哪種元素中，或者它可能出現(xiàn)在多種不同的元素中。這個時候，我們可以考慮使用類選擇器(classselector)o要使用類選擇器我們需要首先對文件元素添加一個class屬性，比如截至日期可能會出現(xiàn)在以下元素中：卬class=udeadliM">...</p>這樣我們就可以用以下方式使用類選擇器了：p.deadliM{color.red;}h2deadJi八g{color:red;}點號加上類名就組成了一個類選擇器。以上2個選擇器會選擇所有包含"deadline"類的p元素和h2元素。而其余包含該屬性的元素則不會被選中。如果我們省略.deadline前面的元素名，那么所有包含該類的元素都將被選中：.deadline{color.red;}通常情況下，我們會組合使用以上2者得到更加有趣的樣式：.deadline(color：red;}span.deadliM{font-style：italic;}以上代碼首先會對所有的包含deadline的元素字體設(shè)置為紅色，同時會對span元素中的文本添加額外的斜體效果。這樣，如果你希望某處文本擁有額外的斜體效果將它們放在<span></span>中就可以了。(2)多類選擇器在實踐的做法中，元素的calss屬性可能不止包含一個單詞，而是一串單詞，各個單詞之間用空格隔開。比如某些元素包含一個"warning”類，某些元素包含一個"important”類，某些元素同時包含"warningimportant”類。屬性名出現(xiàn)的順序沒有關(guān)系：class-"warnMgimportant11class-"important以上2者是等價的。我們希望包含warning類的元素有一個醒目的紅色字體，包含important屬性的元素有一個加粗的字體顯示，而同時包含以上2中屬性的元素另外擁有一個藍色背景(不管還能不能看清文字了)，我們可以使用以下的css代碼：.warning{color：red;}.ii^portant{font-weight:bold;}.wamiiag.important{background:blue;}當然，第三條你也可以寫成：.important.warning{background:blue;}和詞序沒有關(guān)系。說明一下，.warning會匹配所有包含warning屬性的元素，不管該元素還包含多少其他的屬性。.important同理。而.important.warning會匹配所有同時包含以上2種屬性的元素，不管該元素還包含多少其他的類，也不管他們在類列表中出現(xiàn)的順序，只要其中含有這2個屬性，則會被選擇進來！同樣地，多于多類選擇器，在前面加上元素名，則會匹配包含指定類名的指定元素，例如：p.warning.important{}將會匹配同時包含warning和important屬性的p元素，其他同樣包含以上2類的元素則不會被選中。3、ID選擇器ID選擇器和類選擇器有些類似，但是差別又十分顯著。首先一個元素不能像類屬性一樣擁有多個類，一個元素只能擁有一個唯一的ID屬性。其次一個ID值在一個HTML文檔中只能出現(xiàn)一次，也就是一個ID只能唯一標識一個元素(不是一類元素，而是一個元素)。類似類屬性，在使用ID選擇器前首先要在元素中添加ID屬性，例如：使用ID選擇器的方法為井號"#"后面跟id值?，F(xiàn)在我們使用id選擇器選擇以上2個p元素如：^top-paraQfoot-para(}；這樣我們就可以對以上2個段落進行需要的操作了。正因為ID選擇器的唯一性，也使其用法變得相對簡單。4、屬性選擇器屬性選擇器在css2中引入，使我們可以根據(jù)元素的屬性及屬性值來選擇元素。下面分別來說明：(1)簡單屬性選擇器簡單的屬性選擇器可以使我們根據(jù)一個元素是否包含某個屬性來做出選擇。使用方法引：元素名[屬性名]或，屬性名]。比如我們希望選擇帶有alt屬性的所有img元素：img[alt]{...}選擇帶有title屬性的所有元素：*[title]{…}。同類選擇器類似，我們也可以根據(jù)多個屬性信息進行選擇，例如同時擁有href和title的a元素：a[kref][title]{...]組合使用類選擇器使我們的選擇更加富于靈活性。如果我們希望更加精確地根據(jù)屬性值來選擇元素，我們可以在簡單的屬性選擇器中指定屬性的值。最簡單的我們希望找到href屬性值為的錨元素：a[kref=nhttp://\A/\A/\A/.baidu.co^"]{font-weight:bold;}要特別注意的是，這里的具體值匹配實質(zhì)上是一個字符串匹配，所以在這里對于class屬性而言，詞條的順序是有關(guān)系的。ikv\portant,']{...}將不會匹配到<pclass="importantwarning"x/p>,也不會匹配到<pclass="warningimportantmini-type">,這里就是一個生硬的字符串匹配。另外，想要同時匹配多個屬性的值也是可以的：p[cla^="\A/anaiiag"][title=,,para"]{...}將匹配到類為warning(僅有warning),title屬性為para的p元素。(3)部分屬性值選擇器根據(jù)屬性值來匹配元素無疑比簡單的屬性匹配更加精細化了，但是似乎有些精細化過頭了，字符串的完全匹配顯得過于生硬。比如我們希望選擇在一串屬性值中出現(xiàn)了某個關(guān)鍵字的元素，不妨再次以class屬性為例，我們希望選擇所有包含了warning類的p元素，屬性值匹配將無法做到，好在還是有辦法的，我們可以使用以下的部分值匹配選擇器：p[class?=ning"]{...}該選擇器在等號"="前面添加了一個波浪號?，含義為包含后面的字串的匹配。以上代碼將會選擇所有class屬性中包含"warning"的p元素。為了更加清楚地說明問題，它和以下的選擇器是等價的：ng{...}當然?=不僅僅只是用在class屬性上，這只是一個示例。再比如說，我們的文檔中包含一系列人物介紹的div元素:<divtitle=Nintro<divtitle："ict/o2〃〉..</div><divtitle：”ict/o^u>...</div>我們可以使用以下的方式選擇所有人物簡介div：div[title~="intro"]{...}不過遺憾的是<divtitle="animalintro">也將會被選擇進來，這是需要我們特別注意的地方。關(guān)于部分值選擇器也有其局限性，它匹配的是由空格分隔的單詞，如果我們將上面的div寫成下面的樣子就會匹配失敗：<divtitle="Mtr。-廿<divtitle;”認Wo<divtitle：”intY。-3"〉..〈/div)對于這種情況，我們可以使用子串匹配屬性選擇器。規(guī)則如下：Idiv[title^"intro"] //title以intro開頭的div元素(div[tit(e$="iiatro"]{...}//title以Mt/o結(jié)尾的div元素Idiv[title^-,,iKtro',J//title中包含"Mtr。"子串的div元素舉例來說：a[href*="google."]{...}將包含所有鏈接中包含"google."的a元素。div[title$="y"]{...}將包含以下所有div元素:<divtitle="cloudy">...</div><divtitle="snowy">...</div><divtitle="rainy">...</div>可以看出部分值屬性選擇器的功能是十分強大的。5、派生選擇器派生選擇器，乍一看名字不知所云，它又名上下文選擇器，它是使用文檔DOM結(jié)構(gòu)來進行css選擇的。DOM結(jié)構(gòu)在此不再贅述了，但為了更加清楚地說明問題,我們這里給出一個DOM樹作為參考：(1)后代選擇器(descendantselector)如上圖，如果想要選擇body元素的所有l(wèi)i子元素，方法如下：bodyli{...}這里會選擇所有的li后代，也就是圖中的body下的所有l(wèi)i,不論他們之間相隔的代數(shù)有多少。同理，如果想要選擇hl元素下的span,可以使用以下代碼：hlspan{...}如果我們要選擇擁有warning類的元素的li后代，可以使用下面的方法：,八gli{...}當然，如果希望只選擇擁有warning類的div元素的li后代，可以寫作：dMwarvuhgli{...}由上面的例子不難看出，后代選擇器的規(guī)則就是用空格連接2個或多個選擇器?？崭竦暮x為：…的后代。多個選擇器的情況如下：ullili{...}這樣，就會選擇所有ul下包含在li元素下的所有l(wèi)i元素了，聽起來十分拗口，參考我們的DOM樹，會選擇到文檔樹種最后一排li元素。(2)子元素選擇器(childselector)子元素選擇器和后代選擇器不同，它只能選擇某元素的直接后代，不能跨代選取,用法如下：ul>li{...}兩個子元素中間用一個大于號〉連接。上面的代碼會選擇到所有ul元素的直接li子元素。對應(yīng)到DOM樹中，所有的li元素都會被選中，原因是圖中所有的li元素都是ul的子元素。但是，以下代碼將不會選中任何元素：人1>span{...}由于span是hl的"孫子元素”，hl沒有直接的span子元素，因而上面的代碼將不會選到任何結(jié)果。其他方面和后代元素類似，需要特別注意的就是子元素選擇器不能隔代選取。(3)相鄰兄弟選擇器(Adjacentsiblingselector)相鄰兄弟選擇器，故名思意將會選取某個元素的相鄰兄弟元素，注意它選取的是相鄰的兄弟元素而不是所有的兄弟元素，實際上選取的是緊跟在后面的兄弟元素。相鄰兄弟選擇器在實踐中有比較不錯的應(yīng)用，例如，你想在一個h2標題后面的段落應(yīng)用某種獨到的樣式或者希望在某類p段落后的table上添加一個額外的邊距等等。它的用法如下：li+H{...}以上代碼會選擇所有作為li相鄰元素的li元素，聽起來又有點拗口，參考DOM樹，它會選擇除了排在第一個li元素的其余4