資訊專欄INFORMATION COLUMN
摘要：權(quán)重權(quán)重權(quán)重指的是樣式的優(yōu)先級(jí)，有兩條或多條樣式作用于一個(gè)元素，權(quán)重高的那條樣式對(duì)元素起作用權(quán)重相同的，后寫的樣式會(huì)覆蓋前面寫的樣式。
CSS權(quán)重指的是樣式的優(yōu)先級(jí)，有兩條或多條樣式作用于一個(gè)元素，權(quán)重高的那條樣式對(duì)元素起作用,權(quán)重相同的，后寫的樣式會(huì)覆蓋前面寫的樣式。
可以把樣式的應(yīng)用方式分為幾個(gè)等級(jí)，按照等級(jí)來計(jì)算權(quán)重
1、!important，加在樣式屬性值后，權(quán)重值為 10000
2、內(nèi)聯(lián)樣式，如：style=””，權(quán)重值為1000
3、ID選擇器，如：#content，權(quán)重值為100
4、類，偽類和屬性選擇器，如： content、:hover 權(quán)重值為10
5、標(biāo)簽選擇器和偽元素選擇器，如：div、p、:before 權(quán)重值為1
6、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權(quán)重值為0
1、實(shí)例一：
......
這是一個(gè)div元素
2、實(shí)例二：
......
這是一個(gè)h2標(biāo)題
1、E:nth-child(n)：匹配元素類型為E且是父元素的第n個(gè)子元素
......
1
2
3
4
5
2、E:nth-last-child(n)：匹配元素類型為E且是父元素的倒數(shù)第n個(gè)子元素（與上一項(xiàng)順序相反）
3、E:first-child：匹配元素類型為E且是父元素的第一個(gè)子元素
4、E:last-child：匹配元素類型為E且是父元素的最后一個(gè)子元素
5、E:only-child：匹配元素類型為E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n個(gè)類型為E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒數(shù)第n個(gè)類型為E的子元素（與上一項(xiàng)順序相反）
8、E:first-of-type：匹配父元素的第一個(gè)類型為E的子元素
9、E:last-of-type：匹配父元素的最后一個(gè)類型為E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素
11、E:empty 選擇一個(gè)空的元素
12、E:enabled 可用的表單控件
13、E:disabled 失效的表單控件
14、E:checked 選中的checkbox
15、E:not(s) 不包含某元素
......
1
2
3
4
5
16、E:target 對(duì)應(yīng)錨點(diǎn)的樣式
......
標(biāo)題一
......
標(biāo)題一
17、E > F E元素下面第一層子集
18、E ~ F E元素后面的兄弟元素
19、E + F 緊挨著的兄弟元素
屬性選擇器：
1、E[data-attr] 含有data-attr屬性的元素
......
這是一個(gè)div元素
2、E[data-attr=ok] 含有data-attr屬性的元素且它的值為“ok”
3、E[data-attr^=ok] 含有data-attr屬性的元素且它的值的開頭含有“ok”
4、E[data-attr$=ok] 含有data-attr屬性的元素且它的值的結(jié)尾含有“ok”
5、E[data-attr*=ok] 含有data-attr屬性的元素且它的值中含有“ok”
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/2257.html
摘要：只需要在處理的配置上增加編譯的即可。了解更多處理的內(nèi)容本節(jié)課源碼所有課程源碼教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步原文地址系列教程六處理。根據(jù)規(guī)則放在最后的首先被執(zhí)行。 這節(jié)課講解webpack4中處理scss。只需要在處理css的配置上增加編譯scss的 LOADER 即可。了解更多處理css的內(nèi)容 >>> >>> 本節(jié)課源碼 >>> 所有課程源碼 教程所示圖片使用的是...
摘要：結(jié)構(gòu)圖解析后記 結(jié)構(gòu)圖解析： showImg(https://segmentfault.com/img/bVbvXEo?w=862&h=235); showImg(https://segmentfault.com/img/bVbvXEq?w=604&h=814); showImg(https://segmentfault.com/img/bVbvXEv?w=604&h=326); 后記...
摘要：當(dāng)然這不是只限于使用或者其他打包工具的方式都能支持使用優(yōu)點(diǎn)模塊化和可重用性沒有沖突顯性依賴不會(huì)污染全局可以配合預(yù)處理器使用少開發(fā)單獨(dú)文件寫法基本一致 To define is to limit. 定義一樣?xùn)|西，就意味著限制了它。——王爾德 《道林·格雷的畫像》 React系列 React系列 --- 簡單模擬語法(一)React系列 --- Jsx, 合成事件與Refs(二)Reac...
摘要：方法一為父元素添加方法二同時(shí)浮動(dòng)元素方法三添加非浮動(dòng)的清除元素定位布局的核心是屬性，對(duì)元素盒子應(yīng)用這個(gè)屬性，可以相對(duì)于它在常規(guī)文檔流中的位置重新定位。絕對(duì)定位絕對(duì)定位會(huì)把元素徹底從文檔流中拿出來，然后相對(duì)于其他元素默認(rèn)是定位上下文定位。 1.盒模型 盒模型，就是 瀏覽器為頁面中的每個(gè) HTML 元素生成的矩形盒子。 這些盒子們都要按照 可見版式模型（visual formattin...
摘要：在開發(fā)的時(shí)候會(huì)時(shí)常用到第三方的庫或者框架，比如耳熟能詳?shù)?。使用第三方庫在入口文件?dāng)中直接導(dǎo)入安裝目錄結(jié)構(gòu)如圖內(nèi)容如下內(nèi)容如下陳學(xué)輝內(nèi)容如下這是自帶的內(nèi)容如下內(nèi)容如下引入后打開頁面會(huì)看到最后一個(gè)標(biāo)簽有了一個(gè)綠色的背景。 在開發(fā)的時(shí)候會(huì)時(shí)常用到第三方的庫或者框架，比如耳熟能詳?shù)膉query。借助它們能提高開發(fā)效率，但是如何在webpack中使用呢。這篇文章介紹兩個(gè)東西，如何使用第三方庫以及...
閱讀 943·2023-04-25 19:43
閱讀 4239·2021-11-30 14:52
閱讀 4026·2021-11-30 14:52
閱讀 4132·2021-11-29 11:00
閱讀 4023·2021-11-29 11:00
閱讀 4155·2021-11-29 11:00
閱讀 3871·2021-11-29 11:00
閱讀 6761·2021-11-29 11:00
