I have tested a simple html file with css styles.
Basically the correct output should looks like this (I was able to get this correct output in vscode):
enter image description here

however, when I run localhost in FireFox browswer, the output I got doesn’t have any css styles:
enter image description here

I have checked the developer tools in firefox and noticed a warning called “Ruleset Ignored Due To Bad Selector”:
enter image description here

Does anyone know how to fix the problem? I have checked multiple times my CSS files and how I used them in the HTML file, and there should not be any syntax problem. However my Firefox browswer just don’t display any CSS when I run localhost.

this is my css file:
enter image description here

could anyone give me some suggestions? thanks

I have went through numerous other related posts on stackoverflow (like CSS Styles Not Recognized, etc) but still have no luck.