html css样式覆盖,CSS - 样式继承与覆盖

样式继承(分类)

文本相关属性

font-family, font-size, font-style,

font-variant, font-weight, font, letter-spacing,

line-height, text-align, text-indent, texttransform,word-spacing

font-size是比较特殊的，他可以按相对值进行继承。这个特性会广泛应用于响应式设计相关的屏幕适配技术。

列表相关属性

list-style-image, list-style-position,

list-style-type, list-style

还有一个color属性

注： 不需要记住所有的，用的时候现查就可以了。当然你得记住几个重要分类。

样式覆盖

根据引用方式确定优先级

优先级依次提高：外部链接 < 写在style标签里 < 内联属性

也就是“内联属性”里的会覆盖前面两种，“写在style标签里”的会覆盖写在外部文件里，用“外部链接”引进来的。

如果在同一个级别里，几乎只有一个规则，后写的覆盖先写的。

栗子：

//这是写在外部文件里的

h1 { color: #ffffff;}

//这是写在html里的

我的颜色到底是啥？

最后看到的颜色是#123456,因为内联属性设置的值优先级最高，所以覆盖了前面。

后写覆盖先写

栗子：

//这是写在外部文件style.css里的

h1 { color: #ffffff;}

h1 { color: #dddadd;}

//这是写在html里的

我的颜色到底是啥？

#dddadd最后为#dddadd 因为后写的会覆盖先写的，几乎所有的解释型语言都是这样的.

选择器优先级

CSS的样式覆盖，在选择器不同的情况下，我们给每种选择器制定一个权值，计算命中一个元素的所有选择器的总权值，值高者获胜

元素选择器： 1

类选择起器： 10

ID选择器： 100

内联选择器： 1000

栗子：

//HTMl部分：

这里是Abstract

这里是普通的

//CSS部分：

#content p { color: red}

.abstract { color: black;}

p的color最后为red.因为#content p 的权值是101， .abstract的权值是10

important

在样式上加了important，前面所有的规则都忽略 加了important的代码样子如下：

p { color: white !important;}

栗子：

// HTMl部分：

这里是Abstract

这里是普通的

//CSS部分：

#content p { color: red}

.abstract { color: black !important;}

p的color属性为black， 因为.abstract里设置的color属性标记为 !important了。所它忽视一切的规则。