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