無法使用我自己的樣式表覆蓋引導程序樣式

Question

ASP MVC RAZOR

我嘗試覆蓋bootstrap默認樣式。 我將樣式表聲明如下：

 /*bootstrap and default style*/
 @Styles.Render("~/Content/css");
 /*My CSS*/
<link href="@Url.Content("~/css/main.css")" rel="stylesheet" type="text/css" /> 
        @RenderSection("Styles", required: false)

在bundleconfig中:(僅限默認樣式）

       bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css" ));

但正如你在下面看到的那樣，我的風格被bootstrap覆蓋了。

我認為它與head標簽中樣式的順序有關。 但我的是在引導后來的，所以它應該工作......

我復制完整的布局頁面，以便您可以檢查發生了什么。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("https://fonts.googleapis.com/css?family=Roboto")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("https://fonts.googleapis.com/css?family=Tangerine")" rel="stylesheet" type="text/css" />
    @Styles.Render("~/Content/css");
    <link href="@Url.Content("~/css/main.css")" rel="stylesheet" type="text/css" />
    @RenderSection("Styles", required: false)



</head>
<body>

    <div class="cachetop col-lg-12 navbar-fixed-top"></div>
    <div class=" topmenubar navbar navbar-default navbar-fixed-top ">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-left " href="@Url.Action("Accueil","Home")">
                    <img src="@Url.Content("../img/minilogo.png")" />
                </a>

            </div>
            <div class=" navbar-collapse collapse">
                <ul class="menuitembar nav navbar-nav">
                    <li class="menuitem nav-item active">@Html.ActionLink("Notre carte", "pizzas", "Carte", null, new { @class = "nav-link" })</li>
                    <li class="menuitem nav-item">@Html.ActionLink("Nous trouver", "Localisation", "Home", null, new { @class = "nav-link" })</li>
                    <li class="menuitem nav-item">@Html.ActionLink("Un peu d'histoire", "Histoire", "Home", null, new { @class = "nav-link" })</li>
                    <li class="menuitem nav-item">@Html.ActionLink("Travailler chez Michel", "Workwith", "Home", null, new { @class = "nav-link" })</li>

                </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <div class="text-center">
                <p>

                </p>
            </div>
        </footer>

    </div>


    @Scripts.Render("~/bundles/jquery")
    @RenderSection("Javascript", required: false)
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/modernizr")

</body>
</html>

Answer 1

如果您使CSS選擇器更具體，則可以確定應用哪些樣式的特定級別。 這樣做：

li.menuitem { color: black; }

使其更具體。 另外添加！important表示此樣式具有優先級：

.menuitem { color: black !important; }

小心嵌套的CSS層次結構並使用！important。 如果要在不同的上下文中覆蓋這些更改，則可能會導致問題。 僅在必要時使用，但可以使用。

Answer 2

我終於設法做到了，沒有使用!important

ul.menuitembar.nav.navbar-nav li.menuitem a{
    color:black;
}

因此需要考慮特異性。

謝謝Brian

無法使用我自己的樣式表覆蓋引導程序樣式

問題描述

2 個解決方案

解決方案1
2 已采納 2016-11-29 14:47:20

解決方案2
1 2016-11-29 15:16:54

無法使用我自己的樣式表覆蓋引導程序樣式

問題描述

2 個解決方案

解決方案1 2 已采納 2016-11-29 14:47:20

解決方案2 1 2016-11-29 15:16:54

解決方案1
2 已采納 2016-11-29 14:47:20

解決方案2
1 2016-11-29 15:16:54