For .tag and .location, since they both have different background colors and colors, which one is dominant?

As far as I know (and you can test for yourself), when it comes down to a tie like that, the order they are placed will make the difference. So if you had

<p class="tag location">text</p>

if your CSS file was written

.tag{ background-color: blue;}
.location{ background-color: red;}

the background color would be read because the "location" class was placed lower down in the CSS file

if however, you had ordered your CSS file

.location{ background-color: red;}
.tag{ background-color: blue;}

the color would be blue since the "tag" class is now further down in the CSS file. Hope that helps!

For rules of equal specificity, as is the case here, the order determines the setting, with the last taking precedence.

But be aware that specificity is more important than order. For example if the first rule targeted the element by ID, it would still override one that comes later that targets the same element by class.

For more details, see this MDN page on Specificity.