外包css属性不行

Question

我有一个简单的问题，尽管我进行了所有研究和尝试，但仍无法解决。我想将 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 文件时。

Answer 1

在第一种情况下（使用 class），您可以根据实际使用的选择器的特殊性进行游戏。 .navBarItem 是一个单一的 class，所以它会被更具体的内容覆盖。

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

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

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

将规则设置为 .navbar-nav .navBarItem{padding-left:0} 即可解决问题。

Answer 2

我认为您的问题与文件的位置有关。您将文件链接到 css/design.css

<link rel="stylesheet" href="css/design.css" />

您需要 css 目录与 html 文件位于同一目录中，例如：

public.html
- index.html //你的 html 页面
- css
- - design.css

如果这不是问题，请评论我您的文件结构，以便排除问题所在。

Answer 3

您的样式规则已被 'theme.less' 和 'bootstrap.css' 否决。解决问题的最简单方法是将 css 更改为：

.navBarItem {
  padding-left: 0px !important;
}

以便您的新属性被认为是最重要的。

如果您右键单击第一个 'Action' link 并检查元素 (Chrome)，您将看到覆盖您自己的样式的确切 css 属性是这个：

.nav > li > a //found in bootstrap.css at line 3972

现在，为了使您自己的规则最重要，您必须保留第一个属性的继承并将 "a" 替换为您自己的 class，如下所示：

.nav > li > .navBarItem {
  padding-left: 0px;

}

外包css属性不行

Outsourcing css property does not work

html

css

stylesheet

twitter-bootstrap

twitter-bootstrap-3