html – Why can't I remove the underline from text?

Question:

I have property text-decoration: underline; for all elements that are in div. But by writing text-decoration: none; for one of the labels, I still can't get rid of the underline. What's the matter here?

.one {
  display: block;
  text-align: right;
  font-size: 30px;
  text-decoration: none;
}

div {
  width: 50%;
  height: 500px;
  background: yellow;
  text-align: center;
  font-size: 50px;
  color: purple;
  text-decoration: underline;
}

<div>
  <span class="one">Hello, world!</span>
  <br>
  <span class="two">Hello!</span>  
</div>

Answer:

As stated on MDN

Text decorations are drawn around child elements. This means that if an element has its text-decoration property set, then the child element cannot remove it for itself.

_{translation of @xpy 's answer}

The specification states that when applying this property to an element, it will be extended to all internal in flow elements (that is, to elements that do not have float or absolute positioning specified).

There is also a clarification

Text decoration does not apply to any nested out of flow elements, nor to nested atomic inline-level elements such as inline-block and inline-table .

.one {
  display: inline-block;
  text-align: right;
  font-size: 30px;
  text-decoration: none;
}

div {
  width: 50%;
  background: yellow;
  text-align: center;
  font-size: 50px;
  color: purple;
  text-decoration: underline;
  padding: 10px;
}

<div>
  <span class="one">Hello, world!</span>
  <br>
  <span class="two">Hello!</span>
</div>