麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

千鋒教育-做有情懷、有良心、有品質的職業(yè)教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 前端技巧|CSS的特性之層疊性介紹

前端技巧|CSS的特性之層疊性介紹

來源:千鋒教育
發(fā)布人:小千
時間: 2021-05-10 13:27:00 1620624420

      初學者在學習到CSS的時候會了解到它具有繼承性、層疊性、優(yōu)先級等等不同的屬性,如果不了解這些屬性會導致我們在使用它的時候出現(xiàn)各種各樣的問題,今天小千就來給大家介紹一下CSS的層疊性屬性。

      CSS層疊性的概念:

      有多個選擇器或一個選擇器對某個或某幾個標簽中的多條樣式進行選擇,如果多個選擇器都賦給某個或某幾個標簽相同屬性,樣式的作用范圍發(fā)生了重疊

      CSS層疊性的體現(xiàn):

      1.樣式無沖突

css樣式1

      以上代碼中,樣式代碼并無沖突,兩個選擇器中的所有樣式都疊加到了元素div上,div最終呈現(xiàn)的是一個紅色的,寬高度大小為100px的容器。

      2.樣式有沖突

      樣式有沖突,同一級別不受優(yōu)先級影響時

css樣式2

      以上代碼中,在同級別時(同個元素,同是class定義選擇器名稱),樣式代碼出現(xiàn)沖突,兩個選擇器中出現(xiàn)同一條width屬性,則以CSS代碼中最后出現(xiàn)的那條樣式為準,div最終呈現(xiàn)的是一個width為200px,height為100px,紅色的容器。

      樣式有沖突,不同級別受優(yōu)先級(權重)的影響時,CSS規(guī)定基本選擇器的優(yōu)先級從低到高排序為:元素(標記)樣式 < 類別(class)樣式 < ID樣式 < 行內樣式 < !important。

      2-1:類別(class)樣式 VS 元素(標記)樣式

css樣式3

      以上代碼中,class樣式的優(yōu)先級大于元素樣式的優(yōu)先級,即使div設置的width寫在后面,最終呈現(xiàn)的是一個width:200px,height:100px;背景色為紅色的容器。

      2-2:ID樣式 VS 類別(class)樣式

css樣式4

      以上代碼中,ID樣式的優(yōu)先級大于class樣式的優(yōu)先級,最終呈現(xiàn)的是一個width:200px,height:100px;背景色為黃色的容器。

      2-3:行內樣式 VS ID樣式

css樣式5

      以上代碼中,CSS行內樣式優(yōu)先于ID的樣式,div最終呈現(xiàn)的是一個寬度為200px,高度100px,背景顏色為粉色的容器。

      2-4: !important VS 行內樣式

css樣式6

      在CSS中,!important具有最高優(yōu)先級,并且可以寫在任意一條有沖突樣式的后面。在以上代碼中,div在行內樣式表設置背景色為粉色,ID樣式中width為200px;但是在class樣式中,width:100px及背景色為red的后面都添加了!important,因此,最終呈現(xiàn)的是一個寬度為100px,高度為100px,背景色為紅色的容器。

      以上就是css層疊性的幾種不同情況的介紹了,同學們在開發(fā)過程中遇到的問題基本都在上面的情況中了。

      最后如果你對web前端培訓有需求的話,不妨來千鋒大前端培訓班了解一下我們的web前端培訓課程,現(xiàn)在咨詢還有免費學習資料可以領取,趕緊來咨詢一下吧。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業(yè)內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
主站蜘蛛池模板: 久久亚洲伊人中字综合精品| 穿长筒袜的有夫之妇hd中文| 视频免费1区二区三区| 韩国三级香港三级日本三级| 欧美成人在线免费观看| 不卡av电影在线| 精品卡2卡3卡4卡免费| 日本动漫黄观看免费网站| 美女扒开尿口让男人桶进| 亚洲欧美日韩精品专区| 两个小姨子在线观看| 五月婷婷深爱| 老司机67194精品线观看| 亚洲黄色三级网站| 丰乳镇娇妻| 男男毛片| 真实乱l仑全部视频| 国产精品爽爽va在线观看网站 | 美女扒开尿囗给男人玩的动图| 国产福利一区二区三区在线观看 | 搡女人免费视频大全| 亚洲精品永久www忘忧草| www四虎在线高清| 国产精品亚洲精品日韩已满| 91视频久久久久| 中国人观看的视频播放中文| 日本一品道门免费高清视频| 美国一级毛片免费看| 国产白白白在线永久播放| 全彩里番acg海贼王同人本子| 把她抵在洗手台挺进撞击视频| 冬月枫在线观看| 亚洲宅男天堂| 黑白高清在线观看| 四虎影视永久在线精品免费| 波多野结衣gvg708| 波多野结衣在线免费电影| 深夜福利gif动态图158期| 欧美zozozo人禽交免费大片| 性爱狂魔| 国产香蕉久久|