css - 子 div 不会覆盖父级
问题描述
我遇到了一个非常非常基本的问题。搜索了一下,但找不到任何答案。这些是我的嵌套类。在 .css 文件中。这是代码:
.x{
color: blue;
}
.y{
color: red;
}
.x:hover{
opacity: 0.1;
}
.y:hover{
opacity: 1;
}
<div class= "x">
<div class = "y">
<p>ABC</p>
</div>
</div>
在颜色属性中,ABC 的颜色为红色,因此子代覆盖父代。但是当涉及到悬停时,不透明度为 0.1,因为父级覆盖了子级。这种行为是怎么回事?我知道这是基本的,所以任何帮助将不胜感激。
堆栈闪电战: https ://stackblitz.com/edit/angular-ivy-srdbcw ?file=src/app/app.module.ts
解决方案
这是因为不透明度适用于x
. 因此,如果您有多个嵌套元素,则将其不透明度相加。意味着x
为自己设置不透明度,然后为自己y
设置不透明度,依此类推,它不被子元素继承:
span {
background-color: red;
}
div {
opacity: 0.9;
}
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<span>SPAN TEXT with 8 parents</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<span>SPAN TEXT with 1 parent</span>
</div>
同样适用于任何其他属性,它只作用于当前元素:边距、填充、显示、边框等。
推荐阅读
- javascript - React Datepicker在被点击时返回错误的ID
- google-apps-script - 表格嵌入功能 - 仅适用于电子表格所有者,不适用于“任何人”
- python - 如何在 python 中从 aws s3 存储桶读取多个图像到 cv2.imread?
- javascript - Rails 应用程序中 javascript 字符串的国际化
- java - Spring 安全性和()函数
- z3 - 是否可以在 z3 中定义一个具有全量化断言的函数(使用 SMT-LIB2 接口)?
- kotlin - 来自json的gson在kotlin中是错误的,为什么?
- python - 传递的参数无效
- amazon-ec2 - 更改 AWS 容器的 sysctl 大页面
- python - 如何在 Django 中模拟突变参数?