CSS基础知识零碎梳理

选择器

1、选择器优先级：

!important > id > class || 属性 > 标签 > *  // （同级则就近原则）

2、样式优先级

内联 > 内部样式 > 外部样式

3、选择器的组合

（1）基本选择器：

类型	说明
类名选择器	.className
标签选择器	a
属性选择器	input[ type=“password” ] | input[ type=“submit” ]
ID选择器	#id

（2）组合选择器

类型	说明
亲子选择器	A B, 形如 .className #id input[ type=“password” ]
并列选择器	AB, 形如 .className.redBlock
相邻兄弟	A+B
普通兄弟	A~B
子选择器	A>B

（3）伪类选择器

类型	说明
结构伪类	:nth-child(n) | :nth-of-type(n) | :hover | :focus | :first-child | …
伪元素	::before | ::after | …

备注： 结构伪类, 拿<ul> <li> </ul>举例子
ul li:first-child			匹配ul的第一个子元素li
// last-child同上，指最后一个

ul li:nth-child(5)			匹配ul的第一个子元素li
// 此外，5换成 odd或者2n表示奇数，even或者20+1表示偶数，3n表示3的倍数
// n+3表示从第3个开始，-n+5表示前5个，3n+1表示[1 4 7 10 ...],依次类推

ul li:nth-of-type(2)		匹配ul的第二个为li的子元素
ul li:nth-child(5) > a:nth-of-type(2)	匹配第五个li下的第二个为a的标签
// 公式规则同上

E:nth-child(n) 和 E:nth-of-type的区别： E:nth-of-type就是筛选了类型后的E:nth-child(n) ，话糙理不糙。

（4） 权重计算规则（由低到高）：

选择器	权重
*	0
标签、伪元素	10
id	100
内联style	1000
!important	∞

(备注) .className{} !important > !important