Question

所以我有一个使用布局的视图，我想为他改变身体的css，我偶然发现了这个解决方案：

我的观点：

@{
    ViewData["PageId"] = "Login";
}

的CSS：

body#Login {
    padding-top: 0;
    background: #000428;
    background: -webkit-linear-gradient(to left, #004e92, #000428);
    background: linear-gradient(to left, #004e92, #000428);
}

但是当我决定我也想改变html的CSS时，它没有用？

html#Login {
     overflow-y: auto;
}

有人可以解释这是如何运作的，以及为什么body和#Login

之间不能有任何空格

Answer 1

您的选择器要求body标记具有名为Login的ID，如下所示：

<body id="Login">
    This is the Target Element of your Selector
</body>

因此，如果身体没有此ID，则选择器不匹配。一个不匹配的例子可能就是这个：

<body>
    This element has no Id called Login and so Css wouldn't apply
</body>

您可以用一些额外的代码覆盖body，这是对的。但请记住，顺序在CSS中很重要！因此，您必须在原始CSS代码之后包含第二个代码，您要覆盖该代码。当CSS加载到_Layout文件中时，您可以使用一个部分作为示例，以确保在共享CSS之后应用来覆盖它：

<link rel="stylesheet" rel="css/master-shared-stylesheet.css"> @RenderSection("AdditionalPageCss")

然后你可以在视图中做这样的事情，你要覆盖master-shared-stylesheet.css：

@section AdditionalPageCss { <style type="text/css"> /* Overwrite */ body { overflow-y: auto; } </style> }

如何使用ViewData更改特定视图的css

1 个答案: