Question

我遇到了一个非常非常基本的问题。搜索了一下，但找不到任何答案。这些是我的嵌套类。在 .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，因为父级覆盖了子级。这种行为是怎么回事？我知道这是基本的，所以任何帮助将不胜感激。

stackblitz：https://stackblitz.com/edit/angular-ivy-srdbcw?file=src/app/app.module.ts

Answer 1

这是因为不透明度适用于 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>

同样适用于任何其他属性，仅作用于当前元素：边距、填充、显示、边框等。

子 div 不会覆盖父级

1 个答案: