CSS选择器位置

Question

我真的很困惑我们网站样式表的CSS选择器的位置。在样式表中声明css选择器时，是否应该遵循任何特定的规则或规范？

例如：

这是我的导航栏部分的index.html代码段

<!-- 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>

为了选择和更改导航链接项的颜色，css选择器应为'.navbar li a {}'。我感到困惑的是，为什么我们不能使用此CSS选择器选择元素，'＃navbar li a {}”或“＃nav-bar li＃nav-link {}”以及所有其他组合？请帮助我理解这一点。我需要遵循一组特定的规则吗？谢谢偷看]