CSS（六）

番茄西紅柿發布于2019-04-23 13:43 / 1311人閱讀

摘要：權重權重權重指的是樣式的優先級，有兩條或多條樣式作用于一個元素，權重高的那條樣式對元素起作用權重相同的，后寫的樣式會覆蓋前面寫的樣式。

CSS權重

CSS權重指的是樣式的優先級，有兩條或多條樣式作用于一個元素，權重高的那條樣式對元素起作用,權重相同的，后寫的樣式會覆蓋前面寫的樣式。

權重的等級

可以把樣式的應用方式分為幾個等級，按照等級來計算權重

1、!important，加在樣式屬性值后，權重值為 10000
2、內聯樣式，如：style=””，權重值為1000
3、ID選擇器，如：#content，權重值為100
4、類，偽類和屬性選擇器，如： content、:hover 權重值為10
5、標簽選擇器和偽元素選擇器，如：div、p、:before 權重值為1
6、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值為0

權重的計算實例

1、實例一：


......
這是一個div元素

2、實例二：


......

    
        這是一個h2標題

CSS3新增選擇器

1、E:nth-child(n)：匹配元素類型為E且是父元素的第n個子元素

2、E:nth-last-child(n)：匹配元素類型為E且是父元素的倒數第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)：匹配父元素的倒數第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) 不包含某元素

16、E:target 對應錨點的樣式


......
標題一
......
標題一

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屬性的元素且它的值的結尾含有“ok”
5、E[data-attr*=ok] 含有data-attr屬性的元素且它的值中含有“ok”

云服務器 GPU云服務器六鐘頭六十行六點網絡四舍六入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2257.html

webpack4 系列教程(六): 處理SCSS

摘要：只需要在處理的配置上增加編譯的即可。了解更多處理的內容本節課源碼所有課程源碼教程所示圖片使用的是倉庫圖片，網速過慢的朋友請移步原文地址系列教程六處理。根據規則放在最后的首先被執行。這節課講解webpack4中處理scss。只需要在處理css的配置上增加編譯scss的 LOADER 即可。了解更多處理css的內容 >>> >>> 本節課源碼 >>> 所有課程源碼教程所示圖片使用的是...

馬龍駒 2019-08-23 11:33 評論0 收藏0
使用css偽類before／after實現正方形三宮格、正方形六宮格、正方形九宮格

摘要：結構圖解析后記結構圖解析： 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); 后記...

CNZPH 2019-08-30 15:44 評論0 收藏0
React系列 --- 從使用React了解Css的各種使用方案(六)

摘要：當然這不是只限于使用或者其他打包工具的方式都能支持使用優點模塊化和可重用性沒有沖突顯性依賴不會污染全局可以配合預處理器使用少開發單獨文件寫法基本一致 To define is to limit. 定義一樣東西，就意味著限制了它。——王爾德《道林·格雷的畫像》 React系列 React系列 --- 簡單模擬語法(一)React系列 --- Jsx, 合成事件與Refs(二)Reac...

freecode 2019-08-26 10:37 評論0 收藏0
CSS學習筆記(六) 元素定位

摘要：方法一為父元素添加方法二同時浮動元素方法三添加非浮動的清除元素定位布局的核心是屬性，對元素盒子應用這個屬性，可以相對于它在常規文檔流中的位置重新定位。絕對定位絕對定位會把元素徹底從文檔流中拿出來，然后相對于其他元素默認是定位上下文定位。 1.盒模型盒模型，就是瀏覽器為頁面中的每個 HTML 元素生成的矩形盒子。這些盒子們都要按照可見版式模型（visual formattin...

浠ラ箍 2019-08-28 18:03 評論0 收藏0
Webpack 4.X 從入門到精通 - 第三方庫（六）

摘要：在開發的時候會時常用到第三方的庫或者框架，比如耳熟能詳的。使用第三方庫在入口文件當中直接導入安裝目錄結構如圖內容如下內容如下陳學輝內容如下這是自帶的內容如下內容如下引入后打開頁面會看到最后一個標簽有了一個綠色的背景。在開發的時候會時常用到第三方的庫或者框架，比如耳熟能詳的jquery。借助它們能提高開發效率，但是如何在webpack中使用呢。這篇文章介紹兩個東西，如何使用第三方庫以及...

dunizb 2019-08-23 11:32 評論0 收藏0