外部 CSS 不起作用，而内联样式起作用

Question

如果我在我的外部 css 文件中编写它，它确实会使“a”文本变为绿色。

.ink-navigation ul.menu.black li ul.submenu li a {
   color: green;
}

但这有效

<nav class="ink-navigation"> 
   <ul class="menu black">
     <li>
       <ul class="submenu">
         <li>
           <a href="#" title="" style="color:green">This is a text</a>
        </li>
       </ul>
     </li>
   </ul>
</nav>

有谁知道为什么外部 css 不起作用？

Answer 1

CSS按顺序执行； 因此 CSS 底部的规则被赋予更高的优先级并覆盖任何先前的规则。 此外，内联 CSS 在样式表之后执行，因为它是最后看到的，所以它具有优先权。

一个简单的解决方法是添加重要的颜色......例如：

• color: green!important;

附带说明一下，我强烈建议您通过删除实际上导致此类问题的不必要的膨胀来减少代码。 如果.ink-navigation是唯一的，则无需使用当前格式。 使用.ink-navigation ul li ul li a {}甚至.ink-navigation .submenu a {} 。 但是，如果您有较大格式的现有规则，那么它将覆盖较短的格式，因此如果您想缩短代码，解决所有出现的问题很重要。

Answer 2

在 head 标签中，首先将 bootstrap 文件放在顶部，然后将 css 文件放在下面。 有了这个，你不想在每个样式代码中使用 !important 。

Answer 3

你在哪里附加了你的css外部文件？

您的标题中应该有类似的内容

     <link rel="stylesheet" type="text/css" href="CSS/cssFile.css">

Answer 4

很可能您的外部 CSS 在您的 HTML 中没有正确链接。

如何链接与 HTML 位于同一文件夹中的 CSS 文件的示例：

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

此外，只是一个提示 - 如果您只是将 id 或类（即id="green-title" ）作为标签的属性，通常可以更清晰地理解和调试代码。

#green-title {
color: green;
}