CSS Selector Positions

I am really confused with the positioning of CSS selectors for the stylesheet of our website. Is there any specific rule or norm that we are suppose to follow when stating our CSS selector in our stylesheet?

For example:

This is my index.html snippet of the navbar section

<!-- Navigation Bar Section -->
    <section class="nav-bar">
        <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
            <a href="#" class="navbar-brand">Brand</a>

            <!-- Nav items -->
            <div class="navbar-collapse collapse">
                <ul class="navbar-nav ml-auto">
                    <li class="navbar-item">
                        <a href="#" class="nav-link">Home</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#" class="nav-link">About</a>
                    </li>  
                    <li class="navbar-item">
                        <a href="#" class="nav-link">Team</a>
                    </li> 
                    <li class='navbar-item'>
                        <a href="#" class="nav-link">Locations</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#"  class=nav-link>Contacts</a>
                    </li>
                </ul>
            </div>
        </nav>
    </section>

In order to select and change the color of the nav-link items, the CSS selector should be .navbar li a {}. What I am confused with is why can't we select the element using this css selector, #navbar li a {} or #nav-bar li #nav-link{} and all other combinations? Is there a specific set of rule that I need to follow?