个人中心
gpt4 book ai didi

html - 外包 css 属性不起作用

转载 作者：行者123 更新时间：2023-11-28 04:49:18 26 4
gpt4 key购买 nike

我有一个简单的问题，尽管我进行了所有研究和尝试，但仍无法解决。我想将一个 css 属性移出到一个文件中。在拳头下方的代码片段中<li>元素未正确显示在第二个位置。

我的 CSS 文件:

.navBarItem
{
    padding-left: 0px;
}

我的 HTML 文件:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity = "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity = "sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/design.css" />
</head>

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-collapse collapse" id="navBar">
                <ul class="nav navbar-nav">
                    <li><a href="#" class="navBarItem">Action</a></li>
                    <li><a href="#" style="padding-left:0px;">Action</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>

我认为将给定的属性放在另一个文件中不会有什么不同，尤其是当我在最后导入那个 css 文件时。

最佳答案

在第一种情况下(使用类)，您可以根据实际使用的选择器的特殊性进行游戏。 .navBarItem 是一个单独的类，因此它会被任何更具体的内容覆盖。

但是在第二种情况下，您使用具有最高特异性的 style 属性(内联样式)(除了使用 !important)

所以问题不在于该规则在外部文件中，而在于它被其他具有更高特异性的规则覆盖。

在您的特定情况下，违规规则是 bootstrap.css 文件中的 .navbar-nav > li > a。

将您的规则设置为 .navbar-nav .navBarItem{padding-left:0} 会修复它。

关于html - 外包 css 属性不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36557352/

26 4 0
文章推荐： c++ - 异步渲染到 Qt OpenGL 窗口
文章推荐： javascript - jquery如何让一个元素在动画结束后回到初始位置
文章推荐： html - 将元素(使用 ':before' )向右对齐
文章推荐： html - 如果选中单选按钮，则为图像添加边框