Day2课程 2-CSS特性

Day2 2-CSS特性

css特性：化简代码 / 定位问题，并解决问题

• 继承性
• 层叠性
• 优先级

1. 继承性

子级默认继承父级的文字控制属性。
○ 一般把文字控制的属性设置给body的标签，这样的话包里所有标签都会继承这两行文字相关的效果。
○ 而不一样的文字就用选择器找到对应的标签单独设置即可。
这样就不需要把每个子级都去写重复的代码。

如果标签自己有样式则生效自己的样式，对应的样式不继承。

2. 层叠性

特点:
○ 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
○ 不同的属性会叠加：不同的CSS属性都生效

<style>
	div {
		color: red;
		font-weight: 700;
	}
	
	div {
		color: green;
		font-size: 30px;
	}
</style>

<div>div 标签</div>

弹幕区

• 类似于就近原则。
• 注意这里是指同一个选择器被定义了很多次，并不是同一个元素被不同的选择器选中。
• 浏览器从上往下阅读代码后计算，计算出结果才渲染成我们所看到的页面。从上往下阅读这个我们要记住，最好养成把重点属性写在前面的习惯，后续学js也会轻松很多。
• 这个跟后面的模板引用有关联，源文件不能去改。
• 大多数的样式选择器范围大，某个部分特别的，需要利用层叠覆盖之前的样式。
• 而且现在都用root或者@import去层叠覆盖，不会这么简单覆盖。

3. 优先级

也叫 权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
规则（选中标签的范围越大，优先级越低）：
    通配符选择器 ＜ 标签选择器 ＜ 类选择器 ＜ id选择器 ＜ 行内样式 ＜ !important

* ＜ 标签 ＜ . ＜ id ＜ 行内 ＜ !important

!important：提权功能，提高权重/优先级 到最高，慎用

<style>
	div {
		color: red;
	}
	
	.box {
		color: green;
	}
</style>

<div class="box">div 标签</div>

↓（ !important 提优先级）

<style>
	div {
		color: red !important;
	}
	
	.box {
		color: green;
	}
</style>

<div class="box">div 标签</div>

优先级 - 叠加计算规则

div { color: red;}
.box { color: green;}

.box div { color: red;}
.box { color: green;}

叠加计算：如果是复合选择器，则需要权重叠加计算。
公式（每一级之间不存在进位）：（行内样式，id选择器个数，类选择器个数，标签选择器个数）
规则：
○ 从左向右依次比较个数，同一级几个数多的优先级高，如果个数相同，则向后比较
○ 两个特殊情况：
    ● !important权重最高
    ● 继承权重最低

具体案例如下：

<style>
        /* 判断叠加优先级后的最终情况 过程 */
        /* 1. 先排除两个特殊情况：提权!important和继承 */
        /*      排除完毕，再用公式 ↓ */
        /* 2. 按照（行内样式，id选择器个数，类选择器个数，标签选择器个数） */
        /* （0, 0, 2, 1） */
        .c1 .c2 div {
            color: blue;
        }

        /* （0, 1, 0, 1） */
        div #box3 {
            color: green;
        }

        /* （0, 1, 1, 0） */
        #box1 .c3 {
            color: orange;
        }

        /* 3. 从左向右依次比较个数，同一级几个数多的优先级高，如果个数相同，则向后比较
            最终的样式 用#box1 .c3{...} */
</style>
	
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                这行文本是什么颜色的？
            </div>
        </div>
    </div>

答案：

练习题：

    <title>CSS特性 权重叠加 练习题</title>
    <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>

答案：蓝色