css - Child div doesn't override Parent

Question

(This question already has answers here): question from:https://stackoverflow.com/questions/66059100/child-div-doesnt-override-parent

Answer 1

It's because opacity works for whole element of x. So if you have multiple nested elements, then it's opacity is added up. Means x set opacity for itself, then y sets opacity to itself and so on, it's not inherited by child elements:

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>