diff --git a/blog/front-end-learn/css-box.md b/blog/front-end-learn/css-box.md
index 5be42ac0dc957bfb57d4e5054a17c0caf108a57c..37c095b41a012e3c3761eafdfea49ba0ff77af74 100644
--- a/blog/front-end-learn/css-box.md
+++ b/blog/front-end-learn/css-box.md
@@ -64,44 +64,3 @@ display: block;
- a 标签内部可以嵌套任意内容
> a 标签不能嵌套 a 标签
-
-## CSS 特性
-
-- 继承性
-- 层叠性
-
-（1）继承性 inherited
-
-子元素有默认继承父元素样式的特点
-
-可继承的常见属性（文字属性都可以继承）
-
-```
-color
-font-style font-weight font-size font-family
-text-align text-indent
-line-height
-```
-
-通过调试工具判断样式是否可继承
-
-继承失效的特殊情况
-
-如果元素有浏览器默认样式，就不继承父元素属性
-
-- a 标签的 color 会继承时效
-- h 系列标签的 font-size 会继承失效
-
-（2）层叠性
-
-同一个标签设置`不同`的样式
-
-- 样式`层叠叠加`，共同作用在标签上
-
-同一个标签设置`相同`的样式
-
-- 样式会`层叠覆盖`，最终写在最后的样式生效
-
-当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
-
-> 技巧: 编辑器多行输入
diff --git a/blog/front-end-learn/css-priority.md b/blog/front-end-learn/css-priority.md
new file mode 100644
index 0000000000000000000000000000000000000000..eb73e89178375075dfc80f0417e1e9cfe3c1b9fe
--- /dev/null
+++ b/blog/front-end-learn/css-priority.md
@@ -0,0 +1,129 @@
+# CSS 特性
+
+- 继承性
+- 层叠性
+- 优先级
+
+## 继承性 inherited
+
+（1）子元素有默认继承父元素样式的特点
+
+可继承的常见属性（文字属性都可以继承）
+
+```html
+color font-style font-weight font-size font-family text-align text-indent
+line-height
+```
+
+通过调试工具判断样式是否可继承
+
+（2）继承失效的特殊情况
+
+如果元素有浏览器默认样式，就不继承父元素属性
+
+- a 标签的 color 会继承时效
+- h 系列标签的 font-size 会继承失效
+
+示例 ：
+
+[](demo/css-inherited-1.html ':include :type=code')
+
+[](demo/css-inherited-1.html ':include height=200')
+
+## 层叠性
+
+同一个标签设置`不同`的样式
+
+- 样式`层叠叠加`，共同作用在标签上
+
+同一个标签设置`相同`的样式
+
+- 样式会`层叠覆盖`，最终写在最后的样式生效
+
+当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
+
+> 技巧: 编辑器多行输入
+
+示例 ：
+
+[](demo/css-cascade-1.html ':include :type=code')
+
+[](demo/css-cascade-1.html ':include height=50')
+
+## 优先级
+
+不同选择器具有不同的优先级，
+
+优先级高的选择器样式会覆盖优先级低的选择器
+
+（1）优先级公式（由低到高）
+
+- 继承
+
+- 通配符选择器
+
+- 标签选择器
+
+- 类选择器
+
+- id 选择器
+
+- 行内样式
+
+- !important（慎重使用）
+
+总结：选择范围越小，优先级越高
+
+（2）复合选择器权重叠加
+
+计算公式，每级之间不进位
+
+```
+（0, 0, 0, 0）
+
+(行内, ID, 类, 标签)
+```
+
+- 第一级 行内样式个数
+- 第二级 id 选择器个数
+- 第三级 类选择器个数
+- 第四级 标签选择器个数
+
+需要注意：
+
+- !important 权重最高
+- 继承权重最低
+
+> chrome 调试: 元素右键 -> 检查元素
+
+工具：PxCook [https://www.fancynode.com.cn/pxcook](https://www.fancynode.com.cn/pxcook)
+
+示例 1：
+
+[](demo/css-priority-1.html ':include :type=code')
+
+[](demo/css-priority-1.html ':include height=50')
+
+示例 2：
+
+[](demo/css-priority-2.html ':include :type=code')
+
+[](demo/css-priority-2.html ':include height=50')
+
+示例 3：
+
+[](demo/css-priority-3.html ':include :type=code')
+
+[](demo/css-priority-3.html ':include height=50')
+
+示例 4：
+
+[](demo/css-priority-4.html ':include :type=code')
+
+[](demo/css-priority-4.html ':include height=50')
+
+示例 5：
+
+[](demo/css-priority-5.html ':include :type=code')
+
+[](demo/css-priority-5.html ':include height=50')
diff --git a/blog/front-end-learn/demo/css-cascade-1.html b/blog/front-end-learn/demo/css-cascade-1.html
new file mode 100644
index 0000000000000000000000000000000000000000..2da86e075ad3b999da635f4f64875d037ece2543
--- /dev/null
+++ b/blog/front-end-learn/demo/css-cascade-1.html
@@ -0,0 +1,18 @@
+
+
+
+ 君不见黄河之水天上来，奔流到海不复回。
+
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-inherited-1.html b/blog/front-end-learn/demo/css-inherited-1.html
new file mode 100644
index 0000000000000000000000000000000000000000..ddc1339d0a8be91caf5a36067e6bf85e3ebc5777
--- /dev/null
+++ b/blog/front-end-learn/demo/css-inherited-1.html
@@ -0,0 +1,12 @@
+
+
+
+
将进酒
+
李白 〔唐代〕
+
君不见黄河之水天上来，奔流到海不复回。
+