CSS基础 - 两大核心概念、权重值、优先级

1 CSS两大核心概念

 

CSS层叠

 

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

 

CSS继承

 

子元素从父元素继承属性，但不是所有元素都可以继承

 

可继承：visibility、color、font、font-family、font-size、font-style、font-weight、text-decoration、text-align、list-style

 

不可继承：display、margin、border、padding、background、height、width、overflow、position、left、right、top、bottom、z-index、float、clear、

 

2 CSS优先级及权重值

 

2.1 优先级

 

CSS样式表种类：

 

1. 浏览器缺省设置 （浏览器默认样式设置）

 

1. 外部样式表

 

1. 内部样式表（位于 标签内部）

 

1. 内联样式（在 HTML 元素内部） （优先权最高）

 

优先级等级：

 

内联样式 > 内部样式 = 外部样式（同时引入内部样式和外部样式，两个优先级一样，后加载的样式会覆盖先加载的）> 浏览器默认样式

 

2.2 权重值

 

每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。

 

权重值的4个等级的定义如下：

 

第一等：内嵌样式，如: style=""，权值为1000第二等：ID选择器，如：#content，权值为0100

 

第三等：类，伪类选择器和属性选择器，如.content，权值为0010第四等：元素选择器，如div p，权值为0001

 

权重值		a		b	c	d
内嵌样式		1		0	0	0
ID选择器		0		1	0	0
类，伪类，属性		0		0	1	0
元素选择器		0		0	0	1

 

通用选择器（*），子选择器（>）和相邻同胞选择器（+）权重值都为0000

 

 

！important自身不存在优先级，但可以让其他所有优先级失效；