样式表来源与冲突解决原则
1 样式表三种来源
| 序号 | 样式表来源 | 描述 | 实例 |
|---|---|---|---|
| 1 | 内部样式 | 在当前文档内头部位置用<style></style>标签声明的样式 | <head><style>h1{color:red}</style></head> |
| 2 | 内联样式 | 在当前元素以style属性的形式进行声明的样式 | <body><h1 style="color:red"></h1></body> |
| 3 | 外部样式 | 在当前文档外部定义公共样式文件并在当前文档头部用<link>标签引入公共样式文件 | <link rel="stylesheet" href="mycss.css" type="text/css"> |
2 样式表三种引入方式综合示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 外部样式 --><link rel="stylesheet" href="mycss.css" type="text/css" /><title>Document</title><!-- 内部样式 --><style>h1 {color: blue;}</style></head><body><h1>wahahah</h1><!-- 内联样式 --><h2 style="color: red">hahaha</h2><h3>houhouhou</h3></body></html>
3 CSS优先级冲突的解决原则和方案：
虽然 !important 可以将优先级提到最高，但不建议使用。这样破坏了CSS优先级规则。
尽量不使用ID选择器，这样丧失了灵活性。
尽量不使用标签选择器，这样丧失了样式的复用性。
尽量使用兼顾灵活性与复用性的类选择器。
CSS优先级顺序原则：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 |
以上案例优先级自上而下逐级增强。
上例事实上是对优先级原则的更细致全是，对于混合情形用权重的方式给与了更细致的分析。比如：同是标签选择器，4个标签比三个标签有更高优先级。两个标签和一个类选择器比四个标签选择器，享有更高优先级。