資訊專欄INFORMATION COLUMN
摘要：權(quán)重權(quán)重權(quán)重指的是樣式的優(yōu)先級，有兩條或多條樣式作用于一個元素，權(quán)重高的那條樣式對元素起作用權(quán)重相同的，后寫的樣式會覆蓋前面寫的樣式。
CSS權(quán)重指的是樣式的優(yōu)先級，有兩條或多條樣式作用于一個元素，權(quán)重高的那條樣式對元素起作用,權(quán)重相同的，后寫的樣式會覆蓋前面寫的樣式。
可以把樣式的應(yīng)用方式分為幾個等級，按照等級來計算權(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、實例一：
......
這是一個div元素
2、實例二：
......
這是一個h2標(biāo)題
1、E:nth-child(n)：匹配元素類型為E且是父元素的第n個子元素
......
1
2
3
4
5
2、E:nth-last-child(n)：匹配元素類型為E且是父元素的倒數(shù)第n個子元素（與上一項順序相反）
3、E:first-child：匹配元素類型為E且是父元素的第一個子元素
4、E:last-child：匹配元素類型為E且是父元素的最后一個子元素
5、E:only-child：匹配元素類型為E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n個類型為E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒數(shù)第n個類型為E的子元素（與上一項順序相反）
8、E:first-of-type：匹配父元素的第一個類型為E的子元素
9、E:last-of-type：匹配父元素的最后一個類型為E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素
11、E:empty 選擇一個空的元素
12、E:enabled 可用的表單控件
13、E:disabled 失效的表單控件
14、E:checked 選中的checkbox
15、E:not(s) 不包含某元素
......
1
2
3
4
5
16、E:target 對應(yīng)錨點的樣式
......
標(biāo)題一
......
標(biāo)題一
17、E > F E元素下面第一層子集
18、E ~ F E元素后面的兄弟元素
19、E + F 緊挨著的兄弟元素
屬性選擇器：
1、E[data-attr] 含有data-attr屬性的元素
......
這是一個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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2257.html
摘要：只需要在處理的配置上增加編譯的即可。了解更多處理的內(nèi)容本節(jié)課源碼所有課程源碼教程所示圖片使用的是倉庫圖片，網(wǎ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)點模塊化和可重用性沒有沖突顯性依賴不會污染全局可以配合預(yù)處理器使用少開發(fā)單獨文件寫法基本一致 To define is to limit. 定義一樣?xùn)|西，就意味著限制了它。——王爾德 《道林·格雷的畫像》 React系列 React系列 --- 簡單模擬語法(一)React系列 --- Jsx, 合成事件與Refs(二)Reac...
摘要：方法一為父元素添加方法二同時浮動元素方法三添加非浮動的清除元素定位布局的核心是屬性，對元素盒子應(yīng)用這個屬性，可以相對于它在常規(guī)文檔流中的位置重新定位。絕對定位絕對定位會把元素徹底從文檔流中拿出來，然后相對于其他元素默認是定位上下文定位。 1.盒模型 盒模型，就是 瀏覽器為頁面中的每個 HTML 元素生成的矩形盒子。 這些盒子們都要按照 可見版式模型（visual formattin...
摘要：在開發(fā)的時候會時常用到第三方的庫或者框架，比如耳熟能詳?shù)?。使用第三方庫在入口文件?dāng)中直接導(dǎo)入安裝目錄結(jié)構(gòu)如圖內(nèi)容如下內(nèi)容如下陳學(xué)輝內(nèi)容如下這是自帶的內(nèi)容如下內(nèi)容如下引入后打開頁面會看到最后一個標(biāo)簽有了一個綠色的背景。 在開發(fā)的時候會時常用到第三方的庫或者框架，比如耳熟能詳?shù)膉query。借助它們能提高開發(fā)效率，但是如何在webpack中使用呢。這篇文章介紹兩個東西，如何使用第三方庫以及...
閱讀 736·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6184·2021-11-29 11:00
