Question

我是asp.net MVC的新手。我有一些使用相同共享布局页面的视图。现在，我得到了一个新的共享布局页面，该页面具有其特定的设计，因此具有关联的新的CSS和JS文件。

我了解内容页面只是将它们的标记注入共享布局页面的@RenderBody部分。但是，仍然有任何方法可以确保某些CSS和JS不会影响子页面的标记。

Answer 1

听起来您在说的是您有适合您的布局页面的CSS，这也（不希望地）影响了您的视图吗？

正确地说，@ RenderBody只是将视图中的内容插入到布局页面中，生成的是一个完整的文档。任何CSS或JavaScript都会影响整个页面。但是，您可以控制它影响哪些元素，我相信这是您的问题。

您只需要CSS中更具体的选择器即可。例如，如果您的母版页中有一个div，而您希望在其上设置边框：

div { border: 1px solid black; }
<div></div>

会很糟糕，因为它会影响页面上的每个div。尝试创建类并将其应用于您的元素，例如：

.div-black-border { border: 1px solid black; }
<div class="div-black-border"></div>

可以将相同的逻辑应用于您的javascript选择器（假定是问题所在）。

Answer 2

您编写的每个css规则都应以最少元素数量为范围。如果布局中的某些内容不应该影响每个孩子，也许不应该在布局中。

这就是为什么使用类来限制范围并使其具体化的原因。

为使这一步骤更进一步，我通常限制每个页面的父容器，以确保是否创建了通用规则，不会将其泄漏到所有站点。

HTML

   <div class="main__container">

   </div>

CSS

.main__container {
   background: red;
}