FOUND THE SOLUTION. Sending a huge shoutout to @JHeth and @Marko Vucurovic for their invaluable help!
This query may seem lengthy, but the concept is straightforward. Let's break it down into 2 scenarios:
Scenario I
<html>
<head><title>A</title>
<style>
.big {
font-size:300pt}
.small {
font-size:50pt}
</style>
</head>
<body>
<div class="big">
<div class="small"><a href="google.com">Hi</a>
</div>
</div>
</body>
<html>
As the small class div is nested within the big class div, the font size should remain small. And indeed, in this case, the font appears as small (50pt), which is logical.
Even after adding a div to either .big or .small in CSS (div.big and div.small), the font still remains small.
Scenario II
The plot thickens when the CSS selector changes from ".small" and ".big" to ".small a" and ".big a":
<html>
<head><title>A</title>
<style>
.big a{
font-size:300pt}
.small a{
font-size:50pt}
</style>
</head>
<body>
<div class="big">
<div class="small"><a href="google.com">Hi</a>
</div>
</div>
</body>
<html>
Now, even with both div classes added, the font size stays small. But if you only assign div to .big, the font magically enlarges!
This puzzling dilemma has occupied my thoughts for the past couple of days, prompting me to join this forum seeking any insights or assistance offered.