CSS继承性与层叠性

  • Post author:
  • Post category:其他


继小编上一篇对CSS的介绍,在学到继承性与层叠性时小编觉得有必要对其单独进行说明一下。

一、继承性

这边先举一个例子来说(只取了关键部分):

<style type="text/css">
		div{
			color:blue;
			border: 2px solid red;
		}
	</style>
</head>
<body>
	<div>
		<p>我是段落</p>
		<p>我是段落</p>
		<p>我是段落</p>
	</div>

那么我们看得到结果CSS中是对div进行样式修改,div的后代同时也被CSS所修改这里就看得到继承性。

但不是所有的标签都有继承性这边先介绍几种最主要的,其他之后往后学的时候会遇见就知道。

具有继承性属性标签:color,text-开头,line-开头,font-开头的。

继承性从大贯穿到到小。

二、层叠性

为什么会有层叠性这一说,打个很简单的比方来说,在我们对样式进行操作时,当CSS中有多个选择器选中一个标签时修改了他的相同属性时这时候被修改的元素应该听谁的,这里就涉及到了继承性的问题,就是CSS处理冲突的一种能力。那么下面来具体介绍,层叠性在实际作用上非常大,了解这个主要不是说我们要去找冲突,而是在实际运用上避免冲突,当然在介绍时为了直观会去直接写冲突来判断优先级。

1.首先说一个数权重的概念,以做判断

当一个选择器我们看到时就应该有一个数权重(权重在实战上没有后一位满多少进一位之说)。

(id数,class数,标签数)

当遇到冲突时落列出这样一组数

然后进行比较先比较id,id比其余大就不用往下比较了,依次类推,话不多说直接上例子。

按照概念来说<p>标签中内容即为绿色。

我们这里要注意权重不是怎样的选择器标题都有,有其的前提是选择器定位到了所需修改的标签位置,以这个题目做为例子来说的话,所举的三个选择器都定位到了所要修改的p标签,所以才有权重的比较。

那么当权重相同时我们取后面的选择器,后出现的作为实现的。

2.如果在选择器中不直接选中需修改元素的最基础标签则权重为0。

这里取“谁近听谁的”,所描述标签离所需修改标签最近的选择器。

3.有时候会遇到并集选择器,这样的作比较时逗号前后分开理,不能算作一个。

这里补充一个题目:

这个题目补充上了一个知识点,首先我们要明白上图中两种选择器都选择上了最里层的div,因为选择器是一种“非白即黑”的规则,这样理解:拿上图来说只要选择器中有选择到最里层div的这种情况(从分析开来两个选择器都有可以指向最里层div这种情况),那么他就表示指向了最里层div,选择器看祖先结构。

那么上面两个选择器都有权重,分析可知字体为蓝色。

在CSS中我们可以以z-index=  来定义权重。


小结:

我们只有知道问题是怎样出现的才能知道怎样去避免,所以这边的介绍都是以实际比较去做的,希望对大家理解有所帮助。之后关于web的更多会持续更新。



版权声明:本文为qq_40833779原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。