1.1 類別選擇器類選擇器根據(jù)類名來(lái)選擇 前面以”.”來(lái)標(biāo)志，如： .demoDiv{ color:#FF0000; } 在HTML中，元素可以定義一個(gè)class的屬性。 如： <div class="demoDiv"> 1.2 標(biāo)簽選擇器p{ font-size:12px; color:090; } div{ background:#900; } 1.3 ID選擇器前面以”#”號(hào)來(lái)標(biāo)志，在樣式里面可以這樣定義： #product{ color:red; } <div id="product"> 1.4 后代選擇器后代選擇器也稱為包含選擇器，中間加一個(gè)空格分開。后代選擇器中的元素不僅僅只能有兩個(gè)，對(duì)于多層祖先后代關(guān)系，可以有多個(gè)空格加以分開，如id為a、b、c的三個(gè)元素，則后代選擇器可以寫成#a #b #c{}的形式，只要對(duì)祖先元素的選擇在后代元素之前、中間以空格分開即可。 如： <style> div span{ color:#0000CC; } </style> <div> 黑色 <p>藍(lán)色 <span>也是藍(lán)色</span> </p> </div> 1.6子選擇器子選擇器（>）和后代選擇器（空格）。子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一個(gè)后代。而后代選擇器是作用于所有子后代元素： CSS： #links a {color:red;} #links > a {color:blue;} HTML： <p id="links"> <a href="#">Div+CSS教程</a>> <span><a href="#">CSS布局實(shí)例</a></span> <span><a href="#">CSS2.0教程</a></span> </p> 我們將會(huì)看到第一個(gè)鏈接元素“Div+CSS教程”會(huì)顯示成藍(lán)色，而其它兩個(gè)元素會(huì)顯示成紅色。 子選擇器（>）和后代選擇器（空格）的區(qū)別：都表示“祖先-后代”的關(guān)系，但是>必須是“爸爸>兒子”，而空格不僅可以是“爸爸兒子”，還能是“爺爺兒”、“太爺爺兒子”。 1.7 通用選擇器通用選擇器用*來(lái)表示。例如： *{ font-size: 12px; } 表示所有的元素的字體大小都是12px；同時(shí)通用選擇器還可以和后代選擇器組合。 例如： p *{ …… } 表示所有p元素后代的所有元素都應(yīng)用這個(gè)樣式。 1.8 群組選擇器當(dāng)幾個(gè)元素樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明，元素之間用逗號(hào)分隔。如： p, td, li { line-height:20px; color:#c00; } #main p, #sider span { color:#000; line-height:26px; } 1.9 偽類選擇器有時(shí)候還會(huì)需要用文檔以外的其他條件來(lái)應(yīng)用元素的樣式，比如鼠標(biāo)懸停等。這時(shí)候我們就需要用到偽類了。以下是鏈接應(yīng)用的偽類定義。 a:link{ color:#999999; } a:visited{ color:#FFFF00; } a:hover{ color:#006600; } /* IE不支持，用Firefox瀏覽可以看到效果 */ input:focus{ background:# E0F1F5; } Link表示鏈接在沒(méi)有被點(diǎn)擊時(shí)的樣式。Visited表示鏈接已經(jīng)被訪問(wèn)時(shí)的樣式。Hover表示當(dāng)鼠標(biāo)懸停在鏈接上面時(shí)的樣式。 偽類不僅可以應(yīng)用在鏈接標(biāo)簽中，也可以應(yīng)用在一些表單元素中，但表單元素的應(yīng)用IE不支持，所以一般偽類都只會(huì)被應(yīng)用在鏈接的樣式上。
|
|
|
來(lái)自： 一本正經(jīng)地胡鬧 > 《計(jì)算機(jī)》
