Question

这里发生了一件奇怪的事......

我在Visual Studio 2015中使用ASP.NET。当我在我的HMTL文档的标题中的<style>标记内添加自定义CSS时，我的CSS将覆盖Bootstrap的CSS，但是当我在外部.css文件中引用我的CSS时它不会...这是我的代码（样式标记中的CSS与外部css表中的内容完全相同）：

<head runat="server">
//BOOTSTRAP CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<%--<link rel="stylesheet" href="App_Code/MainStyleSheet.css" type="text/css" />--%> 
//UNCOMMENTING THIS WILL NOT OVERRIDE BOOTSTRAP CSS

<style>
    //THIS CSS WILL OVERRIDE BOOTSTRAP CSS
    .navbar {
        padding-top: 15px;
        padding-bottom: 15px;
        border: 0;
        border-radius: 0;
        margin-bottom: 0;
        font-size: 12px;
        letter-spacing: 5px;
        border-radius: 0px !important;
    }
</style>
</head>
<body>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">X.com</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Contract</a></li>
                    </ul>
                </div>
            </div>
        </nav>
</body>

Google上的所有搜索解决方案都说，将我的.css链接放在Boostrap CSS链接下面应该覆盖它，但这是我尝试过的，但它无法正常工作。有什么建议吗？

Answer 1

将MainStyleSheet.css文件移到App_Code文件夹之外。 App_Code文件夹具有默认的编译构建操作，而不是内容。

Answer 2

尝试将你的html代码包装在div中并给它一个class / id并尝试覆盖该包装div。

HTML：

<div class="wrapping_class">    
    <nav class="navbar navbar-default">

    </nav>
</div>

CSS：

.wrapping_class .navbar.navbar-default{
    padding-top: 15px;
    padding-bottom: 15px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    font-size: 12px;
    letter-spacing: 5px;
    border-radius: 0px !important;
}

这是一种基于CSS特性的解决方案，它可以根据功能覆盖某些CSS规则。

请参阅此链接获取特异性值表（对于星球大战粉丝来说）： https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

自定义CSS不会覆盖Bootstrap CSS

2 个答案: