CSS特性

一、CSS特性定义：化简代码/定位问题，并解决问题。

二、三个特性：

1、继承性：子级默认继承父级的文字控制属性。

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

例：

代码：

结果：

2、层叠性

特点：①相同的属性会覆盖：后面的CSS属性覆盖前面CSS属性；

           ②不同的属性会叠加：不同的CSS属性都会生效。

3、优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

①规则：选择器优先级高的样式生效。

②公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

            注：！important提权功能，提高权重/优先级别最高，慎用！

③技巧：选中标签的范围越大，优先级越低。

4、优先级——叠加计算规则

叠加计算：如果是复合选择器，则需要权重叠加计算。

公式（每一级之间不存在进位）：

（行内样式 ，id选择器个数，类选择器个数，标签选择器个数）

规则：①从左向右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较；

          ②！important权重最高

          ③继承权重最低

三、Emmet写法：代码的简写方式，输入缩写VScode会自动生成对应的代码。

1、HTML

说明	标签结构	Emmet
类选择器	<div class="box"></div>	标签名.类名
id选择器	<div id="box"></div>	标签名#id名
同级标签	<div></div><p></p>	div+p
父子级标签	<div><p></p></div>	div>p
多个相同标签	<span>1</span><span>2</span><span>3</span>	span*3
有内容的标签	<div>内容</div>	div{内容}

2、CSS：大多数简写方式为属性单词的首字母。