更新時(shí)間:2017-06-30 來源:黑馬程序員PHP培訓(xùn)學(xué)院 瀏覽量:
CSS基本選擇器
基本選擇器
Style屬性(行內(nèi)樣式):直接寫在標(biāo)簽內(nèi)
如:u<p style=”font-size:12px; color:red;” >文字內(nèi)容</p>
標(biāo)簽選擇器
針對HTML的標(biāo)簽設(shè)置樣式,這個(gè)需要寫在<style>標(biāo)簽內(nèi)。(biaoqiancss.html)
ID選擇器
ID 選擇器可以為標(biāo)有特定 ID 的 HTML 元素指定特定的樣式。 根據(jù)元素ID來選擇元素,具有唯一性,這意味著同一id在同一文檔頁面中只能出現(xiàn)一次盡管你會發(fā)現(xiàn)即便你把幾個(gè)元素都命名成相同的id名字,css選擇器還是會把這些元素都選中應(yīng)用樣式,對于css選擇器,id屬性的唯一性似乎不存在。然而,對于js而言,它只會選擇具有相同id名字元素中的第一個(gè)。出于一個(gè)好的編程習(xí)慣,同一個(gè)id不要在頁面中出現(xiàn)第二次。
語法:以”#”開頭
使用方法:<p id=”id的名稱”></p>
類選擇器
語法:以”.”開頭,后面跟類名
使用方法:<p class=”類名”>內(nèi)容</p>
通配符選擇器
針對當(dāng)前頁面所用的標(biāo)簽應(yīng)用同樣的樣式(對標(biāo)簽的初始化)
*{CSS規(guī)則}
如:*{margin:0;padding:0;border:0;}
標(biāo)簽和類結(jié)合
如:p.test{color:red}=>針對p標(biāo)簽應(yīng)用類名為test的樣式
組合選擇器
多元素選擇器
多個(gè)標(biāo)簽或選擇器同時(shí)聲明。
如:h1,h2,ul,li{margin:0;padding:0;}
定義的方法:選擇器之間用逗號隔開
后代選擇器
后代選擇器也稱為包含選擇器,用來選擇特定元素或元素組的后代,將對父元素的選擇放在前面,對子元素的選擇放在后面,中間加一個(gè)空格分開。后代選擇器中的元素不僅僅只能有兩個(gè),對于多層祖先后代關(guān)系,只要對祖先元素的選擇在后代元素之前、中間以空格分開即可。
例如:p空格span{color:red;}
子元素選擇器
請注意這個(gè)選擇器與后代選擇器的區(qū)別,子選擇器(child selector)僅是指它的直接后代,或者你可以理解為作用于子元素的第一個(gè)后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇,而子選擇器是通過“>”進(jìn)行選擇。
例如:p>span{color:red;}
只會針對p標(biāo)簽內(nèi)的第一級span標(biāo)簽有效
偽類選擇器
有時(shí)候還會需要用文檔以外的其他條件來應(yīng)用元素的樣式,比如鼠標(biāo)懸停等。這時(shí)候我們就需要用到偽類了。
如:<a href=”#”></a>
A:link鏈接的政策狀態(tài)
A:visited鼠標(biāo)單擊過的鏈接狀態(tài)
A:hover鼠標(biāo)放在鏈接上面的(懸停)狀態(tài)
A:active當(dāng)前正在訪問的鏈接狀態(tài)