Text

let's say you have an unordered list.
<ul>
<li>first list</li>
<li> <span>second <a href="/">list</a></span></li>
</ul>

you follow like so in the first list(don't pay attention to the >, it's there for explaining):
ul > li [ul li {selector:value;}]

in the second list, you would follow direct such as a website url (domain.com/path/to/file):
ul > li > span [ul li span {selector:value;}]

In that case, you would be specifying the span inside the list element inside the unordered list.

Now if you were to target the link tag (<a>), then you would code the following:
ul > li > span > a [ul li span a {selector:value;}]

Those are just the basics, it can get a bit icky once you become really involved in css and designing. There are more efficient ways of specifying a single element you want to change, some of which involve taking into account compression.

I am getting confused here too, how can h1 em result in blue when h1 is red and so as the em?

using em as a selector, you're saying all em's are acquiring this trait.
If you were to specify a route to a single em, then you can change that specific attribute and css will automatically skip em's without that direction or automatically overwrite a preexisting attribute.

It's like a hover element:
a {color:#fff;text-decoration:underline;}
a:hover {color:#ddd;text-decoration:none;}

Except hovers only change onhover, while using the css hierarchy you can keep this change on a desired element.
On the other hand, if you were going for validation, using all lowercase is required [h1 not H1].

I'm going to make a tutorial soon about this, more in depth.