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

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

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

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

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

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

Answer 2

你的风格规则被'theme.less'和'bootstrap.css'推翻。解决问题的最简单方法是将css更改为：

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

这样您的新属性就被认为是最重要的。

如果右键单击第一个“操作”链接和“检查元素”（Chrome），您将看到覆盖自己样式的确切css属性是：

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

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

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

}

Answer 3

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

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

您需要将css目录与html文件放在同一目录中，例如：

public.html
- index.html //您的html页面
- CSS
- - design.css

如果这不是问题，请评论你的文件结构如何，这可以排除这个问题。

外包css属性不起作用

3 个答案: