CSS中层叠和继承的概念。

继承

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

<html><br><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，层叠很好理解。

选择器的优先级：

	嵌入	id	class	元素
	a	b	c	d
style	1	0	0	0
id	0	1	0	0
class，属性，伪类	0	0	1	0
元素，伪元素	0	0	0	1
通配符	0	0	0	0
！important	最高	最高	最高	最高

重要性

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

如下代码：

<html>

<head>

<style>

p{color:red!important;}

p{color:green}

</style>

</head>

<body>

<p>123</p>

</body>

</html>

这时p的颜色为红色。

巴特西

CSS中层叠和继承的概念。

最新文章

热门文章