首页 > 代码库 > CSS中继承，特殊性，层叠与重要性

CSS中继承，特殊性，层叠与重要性

2024-08-16 07:48:33   219人阅读

继承

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：

<html>
<head><style>p{border:1px solid red}</style></head><body><p>123<span>123</span>123</p></body></html>

　　

如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

在上面的例子中，span标签没有用处，p标签起到了设置了边框为1像素，实心边框线。

特殊性

有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢？

想要理解这个概念，就要先理解权值这个概念。

在百度百科中对于权值的概念是这样的：在数学领域，权值指加权平均数中的每个数的频数，也称为权数或权重。计算机领域中（数据结构）权值就是定义的路径上面的值。可以这样理解为结点间的距离。通常指字符对应的二进制编码出现的概率。

<html><head><style>p{color:red}.first{color:green}</style></head><body><p class="first">123</p></body></html>

在CSS中，权值是这样的：标签的权值为1，类选择符的权值10，ID选择符的权值为100。

 层叠

如果在html文件中对于同一个元素可以有多个CSS样式存在并且这多个CSS样式具有相同权值怎么办？

这就是层叠，如下列代码：

<html><head><style>p{color:red}p{color:green}</style></head><body><p>123</p></body></html>

最后p中的文本会设置成green，层叠很好理解。

 重要性

当我们在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时我们可以使用！important来解决

如下代码：

<html><head><style>p{color:red!important;}p{color:green}</style></head><body><p>123</p></body></html>

这时p的颜色为红色。

CSS中继承，特殊性，层叠与重要性


联系
我们