Use important tag in CSS to get first preference.

#mydiv
{
   background-image: url(divimg2.svg) !important;
}

I have a html file with a div like

<div id="mydiv" class="mydiv">...</div>

In that html, I have one css file (mycss.css) linked.

at 600th line of that css file, I have

#mydiv
{
   float:left;
   background-image: url(divimg1.png);
   background-repeat: no-repeat;
   width:44px;
   height:43px;
}

at 700th line, in the same css file, I have

#mydiv
{
   background-image: url(divimg2.svg);
}

Now, most of the time I am getting divimg2 but very rarely/intermittently I am getting divimg1. I was under impression that when browser reads css files, it read top to bottom and closest one that means divimg2 should appear all the time. What am I missing.

I understand there shouldn’t be two occurrences of same class but here I am looking for why for the above case, behaviour is intermittent?