html - 无法使 CSS 工作，但同一文件在页面的其他部分工作

Question

我有一个 php/html 文件，我正在尝试设置样式，但由于某种原因它不起作用，我迷路了，因为 CSS 文件上的其他样式工作正常。

这是我的头(包含)文件

    <!-- ========== VIEWPORT META ========== -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- ========== META TAGS ========== -->
    <meta name="description" content="Client and payment management in one place for freelancers and creative agencies.">
    <meta name="keywords" content="client relations management, payment management, software, mobile app, saas">
    <meta name="author" content="SeaitManageit">

    <!-- ========== FAVICON & APPLE ICONS ========== -->
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

    <!-- ========== MINIFIED VENDOR CSS ========== -->
    <link rel="stylesheet" href="styles/vendor.css">
    <link rel="stylesheet" href="styles/main.css">

    <link rel="stylesheet" href="styles/features.css">
    <link rel="stylesheet" href="styles/sign-up.css">
    <link rel="stylesheet" href="styles/nav.css">


    <!-- ========== MODERNIZR ========== -->
    <script src="scripts/vendor/modernizr.js"></script>

这是 php/html 文件的包含

<?php include_once("header-file.php") ?>

最后是我正在处理但无法正常工作的部分

<!-- ========== FEATURE NAVIGATION ========== -->
    <section class="se-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                  <div class="feature-nav">
                    <ul>
                      <li>Analytics</li>
                      <li>Clients</li>
                      <li>Expenses</li>
                      <li>Inbox</li>
                      <li>Invoice</li>
                    </ul>
                  </div> <!-- end feature-nav -->
                </div> <!-- end col-md-12 -->


            </div> <!-- end row -->
        </div> <!-- end container -->
    </section>

忘记了我正在测试的 css

.feature-nav  {color: blue;}

根据我提供的内容，有人能找到问题所在吗？正如我所说，main.css 文件主要工作但不适用于这个特定的 div 或我尝试更改的任何 div。我已经清除了我的缓存，使用了 incog 并使用了不同的浏览器，所以它无论如何都不是我的浏览器。

Answer 1

根据您提供的内容，我假设您有 <ul>和 <li>在 .css 中应用的样式优先于任何 div 样式。

即:

.feature-nav  {color: blue;}

ul li {
  color: red;
}

会将您的列表项设置为红色，而不是蓝色。检查全局列表样式或考虑将您原来的蓝色字体样式更改为更合适的样式，例如:

.feature-nav ul li {color: blue;}

JSFiddle