fix

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）层叠性
-
-同一个标签设置`不同`的样式
-
-- 样式`层叠叠加`，共同作用在标签上
-
-同一个标签设置`相同`的样式
-
-- 样式会`层叠覆盖`，最终写在最后的样式生效
-
-当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
-
-> 技巧: 编辑器多行输入

blog/front-end-learn/css-priority.md

+# 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')

blog/front-end-learn/demo/css-cascade-1.html

+<style>
+    .color--red {
+        color: red;
+    }
+
+    /* 绿色的定义位置在红色之后 */
+    .color--green {
+        color: green;
+    }
+
+    .font-size--20 {
+        font-size: 20px;
+    }
+</style>
+
+<div class="color--green color--red font-size--20">
+    君不见黄河之水天上来，奔流到海不复回。
+</div>
\ No newline at end of file

blog/front-end-learn/demo/css-inherited-1.html

+<style>
+    div {
+        color: green;
+        font-size: 16px;
+    }
+</style>
+
+<div>
+    <h1>将进酒</h1>
+    <a href="#">李白 〔唐代〕</a>
+    <p>君不见黄河之水天上来，奔流到海不复回。</p>
+</div>
\ No newline at end of file

blog/front-end-learn/demo/css-priority-1.html

+<style>
+    /* (行内，id, 类，标签) */
+    /* (0, 2, 0, 0) */
+    #father #son {
+        color: blue;
+    }
+
+    /* (0, 1, 1, 1) */
+    #father p.c2 {
+        color: black;
+    }
+
+    /* (0, 0, 2, 2) */
+    div.c1 p.c2 {
+        color: red;
+    }
+
+    /* 继承 */
+    #father {
+        color: green !important;
+    }
+
+    /* 继承 */
+    div#father.c1 {
+        color: yellow;
+    }
+</style>
+
+<div id="father"
+     class="c1">
+    <p id="son"
+       class="c2">白日依山尽，黄河入海流。</p>
+</div>
\ No newline at end of file

blog/front-end-learn/demo/css-priority-2.html

+<style>
+    /* (行内，id, 类，标签) */
+    /* (0, 0, 0, 2) */
+    div div {
+        color: skyblue;
+    }
+
+    /* (0, 0, 0, 1) */
+    div {
+        color: red;
+    }
+</style>
+
+<div>
+    <div>
+        <div>白日依山尽，黄河入海流。</div>
+    </div>
+</div>
\ No newline at end of file

blog/front-end-learn/demo/css-priority-3.html

+<style>
+    /* (行内，id, 类，标签) */
+    /* (0, 0, 0, 7) */
+    div div div div div div div {
+        color: red;
+    }
+
+    /* (0, 0, 1, 0) */
+    .one {
+        color: green;
+    }
+</style>
+
+<div>
+    <div>
+        <div>
+            <div>
+                <div>
+                    <div>
+                        <div class="one">白日依山尽，黄河入海流。</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

blog/front-end-learn/demo/css-priority-4.html

+<style>
+    /* (行内，id, 类，标签) */
+    /* (0, 0, 2, 1) */
+    .c1 .c2 div {
+        color: red;
+    }
+
+    /* (0, 1, 0, 1) */
+    div #box3 {
+        color: green;
+    }
+
+    /* (0, 1, 0, 1) */
+    #box1 div {
+        color: blue;
+    }
+</style>
+
+
+<div id="box1"
+     class="c1">
+    <div id="box2"
+         class="c2">
+        <div id="box3"
+             class="c3">白日依山尽，黄河入海流。</div>
+    </div>
+</div>
\ No newline at end of file

blog/front-end-learn/demo/css-priority-5.html

+<style>
+    /* (行内，id, 类，标签) */
+    /* 都是继承，最近的父级生效 */
+    /* 继承 */
+    div p {
+        color: red;
+    }
+
+
+    /* 继承 */
+    .father {
+        color: green;
+    }
+</style>
+
+
+<div class="father">
+    <p class="son">
+        <span>白日依山尽，黄河入海流。</span>
+    </p>
+</div>
\ No newline at end of file

blog/front-end-learn/index.md

@@ -27,3 +27,5 @@
 6. [CSS 背景相关属性](blog/front-end-learn/css-background.md)
 
 7. [CSS 盒模型](blog/front-end-learn/css-box.md)
+
+8. [CSS 特性](blog/front-end-learn/css-priority.md)