第一優先順序：無條件優先的屬性只需要在屬性後面使用!important。它會覆蓋頁面內任何位置定義的元素樣式。（ie6支援上有些bug）。
第二等：id選擇器，如：#header，權值為0100.
第三等：類選擇器、如：.bar， 權值為0010.
第四等：型別（標籤）選擇器和偽元素選擇器，如：div ::first-line 權值為0001.
萬用字元，子選擇器，相鄰選擇器等。如*，>,+, 權值為0000.
繼承的樣式沒有權值。
[!note]css選擇器的優先順序：!important > 行內樣式 > id選擇器 > 類選擇器 > 標籤選擇器 > 其他
第一條應該是黃色第三條應該是黑色
第四條應該是紅色
[!note]減少http的請求次數，提高載入的效能
在一些情況下可以減少的大小
關鍵在於對background-position概念的理解和使用
[!note]宣傳/品牌/banner等固定文案
字型圖示中使用
擴充套件：不可見字元其實並不是不顯示，只是這些字元在螢幕上顯示不出來，比如：換行符、回車、退格......字元。
base64字元表中的字元原本用6個bit就可以表示，現在前面新增2個0，變為8個bit，會造成一定的浪費。因此，base64編碼之後的文字，要比原文大約三分之一
[!note]兩個位元組：兩個位元組共16個二進位制位，依舊按照規則進行分組。此時總共16個二進位制位，每6個一組，則第三組缺少2位，用0補齊，得到三個base64編碼，第四組完全沒有資料則用「=」補上。因此，上圖中「bc」轉換之後為「qkm=」；
乙個位元組：乙個位元組共8個二進位制位，依舊按照規則進行分組。此時共8個二進位制位，每6個一組，則第二組缺少4位，用0補齊，得到兩個base64編碼，而後面兩組沒有對應資料，都用「=」補上。因此，上圖中「a」轉換之後為「qq==」；
p文字1p文字2
p文字3
p文字4
css1
css2
css3
我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素,我在學偽元素
[!note]label[for]和id
隱藏原生的input
:checked + label 選擇器
前端知識體系 CSS相關 CSS工程化方案
使用less，sass等css預處理器 使用postcss外掛程式 postcss import precss 使用webpack處理css css loader style loader postcss是乙個平台，具體要取決於這個平台上面的外掛程式可以做什麼 常用的外掛程式如下 1.可以新增屬性字...
web前端 css知識體系 初學者
1 選擇器 常用的選擇器有類選擇器 標籤選擇器 id選擇器 偽類選擇器 屬性選擇器等。css權重即優先順序順序是 內聯樣式 id選擇器 偽類選擇器 屬性選擇器 類選擇器 標籤選擇器 需要特別注意的是，important 會覆蓋所有樣式規則，即 important 的優先順序最高。2 定位 定位有相對...
css知識體系 flexbox模型
flexbox 模型的產生主要是為給布局 對齊和容器內的空間分配提供乙個更有效的方法，即使尺寸未知或是動態改變的 flex，收縮，彈性 就是為此命名 flex布局使得容器能夠改變子元素的寬高來更好的填充可用空間，它既可以擴大子元素填充可用空間也可以收縮以防止溢位。最重要的是，相對於傳統的規則布局 b...