html - CSS选择器位置

Closed. This question is opinion-based。它当前不接受答案。












                            想改善这个问题吗？更新问题，以便editing this post用事实和引用来回答。

                        2天前关闭。



我对我们网站样式表的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{}以及所有其他组合来选择元素？我需要遵循一组特定的规则吗？

最佳答案

确实没有任何约定。只要您了解CSS选择器的工作原理，就可以用一百万种不同的方式编写它。编写选择器时，请记住以下几点：

#parent div是与#parent > div不同的选择器，第一个选择器将完全选择div内的任何#parent元素，而后者仅对div的直接子元素#parent起作用。

CSS ID必须完全唯一（即，仅放在一个元素上）。否则，您将冒浏览器或脚本对选择器的解释不同的风险。

关于html - CSS选择器位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59756652/

上一篇：css - 导入 css 文件时模块解析失败错误以与 next.js react

下一篇：javascript - Bootstrap 折叠按钮在单击时不显示内容

相关文章：

html - 在 Safari 9.1.2 上导航回后滚动被禁用

css - 是否有 CSS 父级选择器？

java - :selected pseudoclass style not applied to cell

javascript - html 间距问题-将左边距保持为可变右边距 0

javascript - 如何使用 Ajax 在多个页面上显示数据库行？

html - 格式化 html 表格列中的文本？

css - 使用 "rect"或 "circle"等基元时，内联 SVG 不可见

html - 如何在使用图像类型按钮以 HTML 表单提交时删除 x 和 y？

php - 在这种情况下是否可以有一个可为空的外键？

html - 无法定位 xlink :href using attribute selectors