CSS基礎(chǔ)知識(shí)零碎梳理
選擇器
1犬钢、選擇器優(yōu)先級(jí)：
!important > id > class || 屬性 > 標(biāo)簽 > * // （同級(jí)則就近原則）
2畅姊、樣式優(yōu)先級(jí)
內(nèi)聯(lián) > 內(nèi)部樣式 > 外部樣式
3懂算、選擇器的組合
（1）基本選擇器：
| 類(lèi)型 | 說(shuō)明 |
|---|---|
| 類(lèi)名選擇器 | .className |
| 標(biāo)簽選擇器 | a |
| 屬性選擇器 | input[ type="password" ] | input[ type="submit" ] |
| ID選擇器 | #id |
（2）組合選擇器
| 類(lèi)型 | 說(shuō)明 |
|---|---|
| 親子選擇器 | A B, 形如 .className #id input[ type="password" ] |
| 并列選擇器 | AB, 形如 .className.redBlock |
| 相鄰兄弟 | A+B |
| 普通兄弟 | A~B |
| 子選擇器 | A>B |
（3）偽類(lèi)選擇器
| 類(lèi)型 | 說(shuō)明 |
|---|---|
| 結(jié)構(gòu)偽類(lèi) | :nth-child(n) | :nth-of-type(n) | :hover | :focus | :first-child | .... |
| 偽元素 | ::before | ::after | ... |
備注： 結(jié)構(gòu)偽類(lèi), 拿<ul> <li> </ul>舉例子
ul li:first-child 匹配ul的第一個(gè)子元素li
// last-child同上，指最后一個(gè)
ul li:nth-child(5) 匹配ul的第一個(gè)子元素li
// 此外柄冲，5換成 odd或者2n+1表示奇數(shù)遵绰，even或者2n表示偶數(shù)辽幌，3n表示3的倍數(shù)
// n+3表示從第3個(gè)開(kāi)始，-n+5表示前5個(gè)椿访，3n+1表示[1 4 7 10 ...],依次類(lèi)推
ul li:nth-of-type(2) 匹配ul的第二個(gè)為li的子元素
ul li:nth-child(5) > a:nth-of-type(2) 匹配第五個(gè)li下的第二個(gè)為a的標(biāo)簽
// 公式規(guī)則同上
E:nth-child(n) 和 E:nth-of-type的區(qū)別： E:nth-of-type就是篩選了類(lèi)型后的E:nth-child(n) 乌企，話糙理不糙。
（4） 權(quán)重計(jì)算規(guī)則（由低到高）：
| 選擇器 | 權(quán)重 |
|---|---|
| * | 0 |
| 標(biāo)簽成玫、偽元素 | 10 |
| id | 100 |
| 內(nèi)聯(lián)style | 1000 |
| !important | ∞ |
(備注) .className{} !important > !important
常用屬性整理
（1）處理盒子溢出
overflow : hidden | scroll | auto
（2）處理字體樣式
font-size: 1em | 16px;
font-weight: lighter | normal | bold | bolder | 100~900 ;
// lighter加酵，bolder經(jīng)常不生效，100~900連續(xù)值也經(jīng)常不生效哭当，字體原因
font-style: italic | oblique;
// italic經(jīng)常不生效虽画，字體原因；可以用oblique進(jìn)行兼容荣病；<em> <i> 默認(rèn)italic
font-family: ".*中文.*" , ".*[\s|空格].*" , arial, ...;
color: red | #ff0000 | rgb(255, 0, 0) | rgb(100%, 0%, 0%);
// 其他文字相關(guān)
text-align: left | center | right;
line-height: 16px | 1em;
text-indent: 32px | 2em;
// 段落縮進(jìn)不要用 ,處理數(shù)據(jù)顯然沒(méi)有設(shè)置樣式來(lái)的簡(jiǎn)便
text-decration: underline | line-through | overline;
// 前兩個(gè)有對(duì)應(yīng)默認(rèn)樣式的語(yǔ)義化標(biāo)簽 <ins> <del>
cursor: pointer | not-allowed | help;
后續(xù)不斷補(bǔ)充
