CSS基础知识梳理

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:first-child           匹配ul的第一个子元素li
// last-child同上，指最后一个

ul li:nth-child(5)          匹配ul的第一个子元素li
// 此外，5换成 odd或者2n+1表示奇数，even或者2n表示偶数，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

---

---

---

常用属性整理

（1）处理盒子溢出

overflow : hidden | scroll | auto

（2）处理字体样式

font-size: 1em | 16px;
font-weight: lighter | normal | bold | bolder | 100~900 ;
// lighter，bolder经常不生效，100~900连续值也经常不生效，字体原因
font-style: italic | oblique; 
// italic经常不生效，字体原因；可以用oblique进行兼容；  默认italic
font-family: ".*中文.*" , ".*[\s|空格].*" , arial, ...;
color: red | #ff0000 | rgb(255, 0, 0) | rgb(100%, 0%, 0%);

// 其他文字相关
text-align: left | center | right;
line-height: 16px | 1em;
text-indent: 32px | 2em; 
// 段落缩进不要用 ,处理数据显然没有设置样式来的简便
text-decration: underline | line-through | overline;
// 前两个有对应默认样式的语义化标签  
cursor: pointer | not-allowed | help;

后续不断补充