自定义 CSS 在 Laravel 中不起作用

Question

在我的 Laravel 项目中，我有以下 CSS 文件

<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/iCheck/css/all.css') }}"  />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/lib.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/skins/iot_skin.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/member/custom.css') }}">

custom.css 中的类：

a .active-link{
color: blue;
}

在刀片中：

<a href="{{ route('parts.import.excel') }}" class="active-link">@lang('nav.importexcel')</a> |

这个类不工作！我必须对其进行内联样式以获得结果。

如果您知道我必须在哪里搜索，请告诉我。谢谢

Answer 1

首先，a 和 .active-link 之间不应有空格。应该是：

a.active-link {
    color: blue;
}

a .active-link 和a.active-link 之间的区别在代码上很细微，但在实现上却非常重要。 a .active-link 的意思是“选择一个在 <a> 元素内的具有 active-link 类的元素。”另一方面，a.active-link 的意思是“选择一个<a> 元素，它上面也有active-link 类。”在您的情况下，您需要a.active-link，因为<a> 元素与具有active-link 类的元素相同。

其次，您可以使用!important 确保它得到color: blue

a.active-link {
    color: blue !important;
}

!important 意味着该规则（在这种情况下将颜色设置为蓝色）将覆盖应用于目标元素的所有其他color 规则。要详细了解某些规则如何应用于其他规则，CSS-Tricks has a great article on CSS Specificity.