简述css中的样式就近原则,css基础简述

什么是css

英文 来源 ：cascading style sheets 硬翻译为 流式样式清单 引申为层叠样式表

css嵌入位置

1.内部样式表

css 嵌入在html中head 标签内并且使用style 标签定义,语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。一下代码中type=“text/CSS” 可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。基本语法格式：

选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

2.行内式内(联样式)

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

内容 标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

3.外部样式表(外链式)

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

link 是个单标签

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

属性

描述

href

定义所链接外部样式表文件的url 可以是相对路径也可以是绝对路径

type

定义所连接文档的类型，在这里需要制定为“text/css”,表示链接的外部文件为css样式表

rel

定义当前文档与被链接文档之间的关系这里需要制定为stylesheet表示这是一个样式表文件

css 嵌入方式总结

样式表嵌入方式

优点

缺点

使用情况

控制范围

行内样式表

书写方便，权重高

没有实现样式和结构相分离

较少

控制一个标签(少)

内部样式表

部分结构和样式相分离

没有彻底分离

较多

控制一个页面(中)

外部样式表

完全实现结构和样式相分离

需要引入

最多,强烈推荐

控制整个站点(多)

css权重解析

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者*的贡献值

0,0,0,0

每个元素(标签)贡献值

0,0,0,1

每个类，伪类贡献值

0,0,1,0

每个ID贡献值

0,1,0,0

每个行内样式贡献值

1,0,0,0,

每个！important贡献值

∞

详细继承规则：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

总结：

1.使用了 !important声明的规则。

2.内嵌在 HTML 元素的 style属性里面的声明。

3.使用了 ID 选择器的规则。

4.使用了类选择器、属性选择器、伪元素和伪类选择器的规则。

5.使用了元素选择器的规则。

6.只包含一个通用选择器的规则。

7.同一类选择器则遵循就近原则。