第六講css選擇器

1、! ! ! ! ! ! ! ! ! html color:black;p colray;h2 color:silver; ! &! ()*+ ,+-+.(/0“”GeeJohnRemindert fet the meeting!notefont-family:Verdana, Arial; margin-left:30px;tofont-size:28px; display: block;fromfont-size:28px; display: block;headingcolor: red;font-size:60px; display: block;bodycolor: blue; fon

2、t-size:35px; display: b選擇器分組h1, h2, h3, h4, h5, h6 color:blue;可以將任意多個選擇器分組在一起，對此沒有任何限制通配符選擇器* color:red;CSS2 引入了一種新的簡單選擇器 - 通配選擇器（universal selector），顯示為一個星號（*）。該選擇器可以與任何元素匹配，就像是一個通配符。CSS 類選擇器類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結(jié)合使用。This heading is very important.*.important color:red;.impor

3、tant color:red;This paragraph is very important.結(jié)合元素選擇器類選擇器可以結(jié)合元素選擇器來使用p.important color:red;CSS 多類選擇器This paragraph is a very important warning.important font-weight:bold;.warning font-weight:italic;.important.warning background:silver;.important.urgent background:silver;This paragraph is a very im

4、portant and urgent warning.!$% !$% 9 2 *# #This is a paragraph ofroduction.類選擇器還是 ID 選擇器？區(qū)別 1：只能在文檔中使用一次區(qū)別 2：不能使用 ID 詞列表區(qū)別 3：ID 能包含更多含義9C0/ :;/4(2(?/-8ABDE0/EFG5, 5, 7 *707=07* /;0/83.H/4ICJ*F屬性選擇器屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素。根據(jù)屬性選擇如果您希望把包含標題（Htle）的所有元素變?yōu)榧t色，可以寫作：*Htle color:red;與上面類似，可以只對有 href 屬性的錨（a 元素

5、）應(yīng)用樣式：ahref color:red;例如，為了將同時有 href 和 Htle 屬性的 HTML 超鏈接的文本設(shè)置為紅色，可以這樣寫： ahrefHtle color:red;例如，可以對所有帶有 alt 屬性的圖像應(yīng)用樣式，從而突出顯示這些有效的圖像：imgalt border: 5px solid red;根據(jù)具體屬性值選擇例如，假設(shè)希望將指向 Web 服務(wù)器上某個指定文檔的超鏈接變成紅色，可以這樣寫：ahref=hSp: about_us.asp color: red;.cn/那個會變紅？ahref=http:a href=http:a href=http:W3S title=C

6、SSCSS.cn/html/ title=HTMLHTML屬性與屬性值必須完全匹配This paragraph is a very important warning.pclass=importantpclass=important warning color: red;根據(jù)部分屬性值選擇pclass=important color: red;部分值屬性選擇器與點號類名記法的區(qū)別p.important 和 pimportant 應(yīng)用到 HTML 文檔時是等價的imgHtle=Figure border: 1px solid gray;這個規(guī)則會選擇 Htle 文本包含 Figure的所有圖像。

7、沒有 Htle 屬性或者 Htle屬性中不包含 Figure 的圖像都不會匹配。子串匹配屬性選擇器類型描述abc=def選擇 abc 屬性值以 def 開頭的所有元素abc$=def選擇 abc 屬性值以 def 結(jié)尾的所有元素abc*=def選擇 abc 屬性值中包含子串 def 的所有元素特定屬性選擇類型*lang|=en color: red;上面這個規(guī)則會選擇 lang 屬性等于 en 或以 en- 開頭的所有元素imgsrc|=gure border: 1px solid gray;CSS 后代選擇器后代選擇器（descendant selector）又稱為包含選擇器。后代選擇器可以

8、選擇作為某元素后代的元素。根據(jù)上下文選擇元素h1 em color:red;This is a important heading This is aimportant paragraph.語法解釋在后代選擇器中，規(guī)則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結(jié)合符（combinator）。每個空格結(jié)合符可以解釋為“. 在 . 找到”、“. 作為 . 的一部分”、“. 作為 . 的后代”，但是要求必須從右向左讀選擇器。div.sidebar background:blue;div.maincontent background:white;div.sidebar a

9、:link color:white;div.maincontent a:link color:blue;CSS 子元素選擇器與后代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素選擇子元素如果您不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。h1 strong color:red;This is very important. This is reallyvery important.語法解釋h1 strongh1 strongh1 strongh1strong結(jié)合后代選擇器和子選擇

10、器panytd pCSS 相鄰兄弟選擇器相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素 W W * :P70=/*?Q_*RAB語法解釋List item 1List item 2List item 3List item 1List item 2List item 3li + li font-weight:bold;html body table + ul margop:20px;CSS 偽類 (Pseudo-classes)CSS 偽類用于向某些選擇器添加特殊的效果。語法selector : pseudo-class pr

11、operty: valueselector.class : pseudo-class property: value錨偽類在支持 CSS 的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標懸停狀態(tài)。/* 未訪問的鏈接 */* 已訪問的鏈接 */* 鼠標移動到鏈接上 */* 選定的鏈接 */a:link color: #FF0000 a:visited color: #00FF00 a:hover color: #FF00FF a:active color: #0000FF偽類與 CSS 類偽類可以與 CSS 類配合使用：.red : vi

12、sited color: #FF0000CSS SyntaxCSS2 - :rst-child 偽類rst-child 偽類來選擇元素的第一個子元素匹配第一個 元素p:-child color: red;some textsome text匹配所有 元素中的第一個 元素p i:-child font-weight:bold;some text. some text.some text. some text.匹配所有作為第一個子元素的 元素中的所有 元素p:-child i color:blue;some text. some text.some text. some text.CSS偽類屬性描

13、述CSS:acHve向被激活的元素添加樣式。1:focus向擁有鍵盤輸入焦點的元素添加樣式。2:hover當鼠標懸浮在元素上方時，向元素添加樣式。1:link向未被的添加樣式。1:visited向已被的添加樣式。1:rst-child向元素的第一個素添加樣式。2CSS偽元素CSS 偽元素用于向某些選擇器設(shè)置特殊效果。CSS偽元素屬性描述CSS:rst-leSer向文本的第一個字母添加特殊樣式。1:rst-line向文本的首行添加特殊樣式。1:before在元前添加內(nèi)容。2:acer在元后添加內(nèi)容。2:rst-line 偽元素p:rst-line color:#0000; font-variant:small-caps; font colorbackgroundword-spacing leSer-spacing text-decoraHon verHcal-align text-transform line-height clear:rst-leSer 偽元素p:rst-leSer color:#0000; font-size:xx-large; font colorbackground margin padding bordertext-decoraHonverHcal-align (僅當 oat 為 none 時) text-transformline-hei