您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關CSS選擇器的類別有哪些的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
選擇器分為兩大類:
1.基本選擇器
a.標簽選擇器:指的就是選擇器的名字代表html頁面上的標簽
p{
color:red ;
border:1px dashed green;
}
b.類選擇器:規定用圓點.來定義
優點:靈活
eg: .one{background-color:#ff0099; }
c. ID選擇器:規定用#來定義
eg: #one{cursor:hand; }
區別:標簽選擇器針對的是頁面上的一類標簽.
類選擇器可以供多種標簽使用.
ID選擇器是值供特定的標簽(一個). ID是此標簽在此頁面上的唯一標識。
d:通用選擇器: 用*定義,代表頁面上的所有標簽。
*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}
2.擴展選擇器
a. 組合選擇器:采用逗號隔開
eg: p,h2,h3,.one,#two{color:red ; }
b. 關聯選擇器(后代選擇器): 采用空格隔開
eg: h5 span i{color:red ; }
表示h5標簽中的span標簽中的i標簽的樣式
h5和span和i標簽不一定是緊挨著的。
c. 偽類選擇器
1) :靜態偽類:規定是用:來定義.只有兩個.只能用于超鏈接.
:link表示超鏈接點擊之前的顏色
:visited表示鏈接點擊之后的顏色
eg:a:link{color:red ;}
a:visited{color:yellow;}
注意: a:link{}定義的樣式針對所有的寫了href屬性的超鏈接(不包括錨)
a{}定義的樣式針對所有的超鏈接(包括錨)
2) :動態偽類 : 針對所有的標簽都適用
:hover : 是移動到某個標簽上的時候
:focus : 是某個標簽獲得焦點的時候
:active : 點擊某個標簽沒有放松鼠標時
eg: label:hover{color:#00ff00; }
input:focus{
background-color:#ff9999;
border:1px solid red;
}
a:active{
color:blue;
}
感謝各位的閱讀!關于“CSS選擇器的類別有哪些”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。