css元素样式来源及优先级冲突的解决方案

必做: css元素样式来源有哪些,实例演示
选做: css优先级冲突的解决方案

css元素样式来源

1. 当前文档:在style标签中实现样式
2. 元素属性:用元素的属性来实现样式,
3. 外部共享:用link标签实现样式

解决样式冲突的3中方案

1. 样式表来源
2. 选择器优先级
3. 代码顺序

选择器的优先级

• tag < class < id
  选择器的优先级方案

案例	id	class	tag	标识
html body header h1	0	0	4	0, 0, 4
body header.page-header h1	0	1	3	0, 1, 3
.page-header .title	0	2	0	0, 2, 0
#page-title	1	0	0	1, 0, 0

注意:

1. 尽可能不用!important
2. 尽可能不用或少用id,因为级别太高了,丧失了灵活性,除非在锚点中,可以用一下
3. 尽可能不用标签
4. 样式遵循 复用 原则