CSS總結(jié)思維導(dǎo)圖

----------------------------
|      CSS總結(jié)思維導(dǎo)圖     |
----------------------------
|
|
------------|------------
|            |           |
|         選擇器        屬性取值
|            |           |
|    ---------|---------|
|    |        |        ||
|  class  id選擇器    標(biāo)簽選擇器
|    |        |        ||
|    |      偽類      偽元素
|    |        |        ||
|  組合選擇器  |    屬性選擇器
|    |        |        ||
| 通配選擇器  |     !important
|    |                   |
|  子選擇器                |
|____|___________________|
|
|     
---------------------
|        盒模型      |
---------------------
|
|
__|_______
|        |
|    padding
|        |
margin  border
|        |
|    content
|        |
|________

一、選擇器：

class選擇器：.class-name {}，多個(gè).class-name {}
id選擇器：#id-name {}，id選擇器權(quán)重高于其他選擇器
標(biāo)簽選擇器：p {}、h1 {}，用標(biāo)簽名選擇元素
偽類選擇器：:link {}、:visited {}、:hover {}、:active {}、:focus {}、:nth-child()
偽元素選擇器：::first-letter {}、::first-line {}、::before、::after
通配符選擇器：* {}，匹配所有元素
組合選擇器：類選擇器+標(biāo)簽選擇器；后代選擇器：A B{}（A內(nèi)的所有B）；子選擇器：A>B{}（A直接子節(jié)點(diǎn)的B）
屬性選擇器：[attribute] {}、[attribute=value] {}、[attribute~=value] {}、[attribute^=value] {}、[attribute$=value] {}、[attribute|=value] {}、[attribute*=value] {}
!important：給一個(gè)樣式添加!important會(huì)覆蓋任何其他與之沖突的樣式，應(yīng)該避免使用

二、盒模型：

由內(nèi)到外分別是content、padding、border、margin
設(shè)置盒模型：box-sizing: content-box（標(biāo)準(zhǔn)盒模型）、box-sizing: border-box（IE盒模型）