When I first write the first version, world is still blue. When I modify it to second version, world doesn't turn blue.

The first version use class="Class on the father element, so that son elements can all use this property. But I want to modify son element's property. It turns out that modification doesn't work as expected.

Then I tried second version. Instead of putting class="Class" on the <div> tag, I use class="Class on each son element. At this time, the modification worked.

null means color still follows original set property in css file.

unset means clear this property value and set it to default value.

CSS file as follows:

.Class {
    color: blue;
}

HTML:

first version

<div class="Class">
    <h1>hello</h1>
    <h1 id="hello">hello</h1>
    <h1 id="world">world</h1>
    <script>
        let hello = document.querySelector("#hello");
        let world = document.querySelector("#world");
        hello.style.color = null;
        world.style.color = "unset";
    </script>
</div>

second version

<div>
    <h1 class="Class">hello</h1>
    <h1 id="hello" class="Class">hello</h1>
    <h1 id="world" class="Class">world</h1>
    <script>
        let hello = document.querySelector("#hello");
        let world = document.querySelector("#world");
        hello.style.color = null;
        world.style.color = "unset";
    </script>
</div>

For the sake of convenience, we usually choose the first version, because it doesn't need to add class="Class" on every son element tag. However, it will cause the problem mentioned above. Why the problem arises? And is there other way to still use class="Class" on the father element, and can change son element's property.