CSS的两大特性之继承性和层叠性

来源：互联网发布：qq拼音输入法linux 编辑：程序博客网时间：2024/05/16 07:09

1.继承性

css的继承性指的是子元素会继承父元素的某些样式属性。例如在父元素定义字体颜色（color属性），子元素会继承父元素的字体颜色，不过，并不是所有的属性都会被子元素继承，如margin，padding，border等就不具备继承性。在css中，具有继承性的属性有三大类:

文本相关的属性:font-family、font-size、font-style、font-weight、font、line-height、text-align、text-indent、word-spacing.
列表相关的属性:list-style-type、list-style-image、list-style-position、list-style
颜色相关的属性:color

举例：

<!doctype html><html lang="CN"><head><title></title><meta charset="utf-8"><style type="text/css">body{font-size:14px;font-family:"Microsoft Yahei";}#father{color:red;font-weight:bold;}</style></head><body><div id="father">这是父元素<div id="son">这是子元素</div></div></body></html>

预览效果如下图

这里为父元素定义了color和font-weight两个属性，从预览效果我们可以看到，子元素继承了父元素的这两个属性值。

特殊举例：

<!doctype html><html lang="CN"><head><title></title><meta charset="utf-8"><style type="text/css">body{font-size:14px;font-family:"Microsoft Yahei";}#father{color:red;font-weight:bold;}</style></head><body><div id="father">这是父元素<div id="son"><a href="#">这是子元素</a></div></div></body></html>

预览效果：

我们发现当给子元素添加a标签时，子元素并没有继承父元素的字体颜色，这是因为a标签本身有默认的颜色样式，优先级比继承的要高，如果想要改变a标签的颜色，只能选中a标签，然后再进行单独操作。

2.层叠性

首先我们来看一个问题，如果在网页中，我们对于同一个元素重复定义了多个相同的属性时，CSS会怎么处理呢？

看下面的代码：

<!doctype html><html lang="CN"><head><title></title><meta charset="utf-8"><style type="text/css">body{font-size:14px;font-family:"Microsoft Yahei";}div{color:green;}div{color:blue;}div{color:red;}</style></head><body><div>hello world</div><div>hello world</div><div>hello world</div></body></html>

预览效果如图：

我们发现字体显示的红色，由此可知，由于CSS的层叠性“color:blue”会覆盖“color:green”,而“color:red”会覆盖"color:blue",因此，最终所有div的颜色为red。

CSS的层叠性，指的就是样式的覆盖，对于同一个元素来说，如果我们重复定义多个相同的属性，并且这些属性具有相同的权重，CSS会以最后定义的属性为准，也就是“后来者居上”原则。

阅读全文

1 0