010——CSS的三大特性(重点)

本文详细介绍了CSS中的层叠性、继承性和优先级概念。通过实例演示了当样式发生冲突时如何解决,以及子元素如何继承父元素的特定样式。此外还解释了不同CSS声明的优先级。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、层叠性

我理解中的层叠式覆盖的意思。如果有相同的两个样式,只能选择一个,则遵循就近原则。

① 样式冲突: 遵循就近原则。

实例:

<div>路飞</div>
div {
	color: red;
}
div {
	color: pink;
}

效果:

② 样式不冲突: 不会发生层叠。

实例:

div {
	color: red;
	font-weight: 700;
}
div {
	color: pink;
}

效果(加粗了):

二、继承性

子标签继承父标签的某些样式(可以理解子承父业)。

实例:

<div>
	路飞
	<p>海贼王</p>
</div>
div {
	color: red;
	font-weight: 700;
}

效果:

在样式中,并没有设定p的样式,而结果中p的样式继承他的父亲div的样式。小苗的利用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式:text-,font-,line-,以这些开头的可以继承,以及color属性。

三、优先级(△)

!important > 行内样式 > id > class > 标签 > 继承者或*

对于比较方法有这样的特点:

对于 div ul li {}的权重值是0 , 0 , 0 , 3;.class{} 的 权重是0 , 0 , 1 , 0。则仍是.class{} 的权重大于div ul li {}。遵循对应比较,不能进位,像刚刚第二个的1的位置上第一个在此位置是0,此时就不需要再比较第四个位置了,无论第一个的第四个位置的值有多大都没有用了。再例如对于.nav ul li{}的权重是 0 , 0 , 1 , 2。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值