时间戳

首页 > 解决方案 > 外部 CSS 文件不会影响按钮样式

css - 外部 CSS 文件不会影响按钮样式

问题描述

例如，我有以下按钮：

<input class="btn btn-primary btn-block btn-lg register_btn rounded-0 submit-button" type="submit" value="Submit">

custom.css以及自定义文件中的以下代码：

.submit-button {    
    background-color:yellow!important;
    border-color:yellow!important;
}

但它不会影响按钮的颜色。但是如果我为按钮做一个内联样式，它就可以工作

这就是我如何包含引导文件和custom.css：

    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/custom.css">

标签： cssbootstrap-4

解决方案

和yellow!important.之间缺少空格。在下面的代码之后留出空间或复制下面的代码并用这个替换旧代码并尝试:)yellow!importantyellow

.submit-button {    
    background-color:yellow !important;
    border-color:yellow !important;
}

注意：请确保您的custom.css文件位于 css 文件夹中并正确链接。在您的 Browser( Ctrl+SHift+I) 中进行一次开发人员窗口检查，以查看在按钮上应用了哪些 CSS。

更新：

由于这是间距问题，您现在可以避免!important，因为这不是一个好习惯。所以确保没有使用内联样式:)

.submit-button {    
    background-color:yellow;
    border-color:yellow;
}

推荐阅读