偽類css3選擇器應(yīng)用,css3的作用及角色?
CSS3是CSS2的升級(jí)版本,3只是版本號(hào),它在CSS2.1 的基礎(chǔ)上增加了很多強(qiáng)大的新功能,目前主瀏覽器 Chorme、Safari、Firefox、Opera、甚至360都已經(jīng)支持了CSS3大部分功能了,IE10以后也開始全面支持CSS3了。在編寫CSS3樣式時(shí),不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規(guī)則尚未成為W3C標(biāo)準(zhǔn)的一部分。是瀏覽器的私有屬性雖然目前較新版本的瀏覽器都是不需要前綴的,但為了更好的向前兼容,前綴還是少不了的。
Chrome 和 Safari:-webkit
Firefox:-moz
IE:-ms
Opera:-o
CSS3 把很多以前需要使用的圖片和腳本來實(shí)現(xiàn)的效果,甚至動(dòng)畫效果,現(xiàn)在只需要短短幾行代碼就能搞定。比如:圓角、圖片邊框、文字陰影和盒陰景、漸變、個(gè)性化字體、多圖片背景、變形處理(旋轉(zhuǎn)、縮放、傾斜、移動(dòng))、過渡、動(dòng)畫、多欄布局、媒體查詢等。還有選擇器,簡(jiǎn)化了前端開發(fā)工作人中山小欖的設(shè)計(jì)過程,加快頁(yè)面載入速度。
css選擇器中后代選擇器與子選擇器的區(qū)別?
css后代選擇器和子選擇器的區(qū)別介紹:
1 css后代選擇器語(yǔ)法:h1 em {color:red;} 表示的是從h1開始里面包含的所有的em元素變成紅色,h1為祖先,其他的em都是后代,即選中后代,不管是兒子還是孫子,只要是都會(huì)被選中,為后代選擇器。2、css子元素選擇器語(yǔ)法:h1>em{color:red;} 表示的是從h1開始里面的第一層em元素變成紅色,h1為祖先,em為兒子,就像世襲制一樣,只能傳給兒子,孫子和其他堂親都不行
css復(fù)合選擇器有哪三種?
1、元素選擇器 標(biāo)簽名{ }
2、id選擇器 #id屬性值{ }
3、類選擇器 .class屬性值{ }
4、選擇器分組(并集選擇器)
作用:通過它可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素(通常用于集體聲明)
語(yǔ)法:選擇器1,選擇器2,選擇器n{ }
5、復(fù)合選擇器(交集選擇器)
作用:選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素并為其設(shè)置屬性
語(yǔ)法:選擇器1選擇器2選擇器n{ }
!注意選擇器之間不能有空格,要緊挨在一起
6、通配選擇器
作用:用來選中頁(yè)面中所有的元素
語(yǔ)法:*{ }
7、后代元素選擇器
作用:選中指定元素的指定后代元素
語(yǔ)法:祖先元素 后代元素{ }
8、子元素選擇器
作用:選中指定父元素的子元素
語(yǔ)法:父元素>子元素
9、偽類選擇器
偽類表示元素的一種特殊狀態(tài)
:hover 移入時(shí)元素的狀態(tài)
:visited 已被訪問過后的元素的狀態(tài)
:active 被點(diǎn)擊時(shí)元素的狀態(tài)
10、 屬性選擇器
作用:根據(jù)元素中的屬性或?qū)傩灾祦磉x取指定元素
語(yǔ)法:[屬性名]選取含有指定屬性的元素
? [屬性名=“屬性值”]選取含指定屬性值的元素
? [屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開頭的元素
? [屬性名$="屬性值"] 選取屬性值以指定內(nèi)容結(jié)尾的元素
? [屬性名*="屬性值"] 選取屬性值包含指定內(nèi)容的元素
11、兄弟元素選擇器
+選擇器
作用:選中一個(gè)元素后緊挨著的指定的兄弟元素
語(yǔ)法:前一個(gè)+后一個(gè)(作用在后一個(gè))
~選擇器
作用:選中后邊所有的制定兄弟元素
語(yǔ)法:前一個(gè)~后邊所有
用什么表示子代選擇器?
CSS3中的關(guān)系選擇器主要包括子代選擇器和兄弟選擇器,其中子代選擇器由符號(hào)連接,兄弟選擇器由符號(hào)“+”和“~”連接,具體如下所示。
(1)關(guān)系選擇器
例如: h1>strong
說明:表示選擇嵌套在h1標(biāo)記的子標(biāo)記strong。
(2)臨近兄弟選擇器
例如: h2+p
說明:表示選擇h2標(biāo)記后緊鄰的第一個(gè)兄弟標(biāo)記p。
(3)普通兄弟選擇器
例如:p~h2
說明:表示選擇p標(biāo)記所有的h2兄弟標(biāo)記