Razor 页面 - CSS 隔离 - 某些 HTML 标签的样式不起作用

问题描述 投票：0回答：5

我正在尝试使用 Razor Pages、CSS 隔离在 ASP.NET Web 应用程序中设置正文、标题和表单标签的样式。在作用域 CSS 文件 (_Layout.cshtml.css) 中为某些 HTML 标记创建的样式不起作用。其他组件文件也是如此。在作用域 CSS 文件中为这些标签和样式类选择器添加类也不起作用。

代码 - _Layout.cshtml 的一部分：

    <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - RazorTest</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
  <link rel="stylesheet" href="~/css/_Layout.cshtml.css" asp-append-version="true" />
  <link rel="stylesheet" href="~/RazorTest.styles.css" asp-append-version="true" />
</head>

<body>
  <header>
    <nav>
      <div>
        <img src="" alt="">
        <a href=""></a>
      </div>
    </nav>
  </header>
  <div class="container">
    <form action="">
      <input type="text">
    </form>
    <main role="main" class="pb-3">
      @RenderBody()
    </main>
  </div>

  <footer class="border-top footer text-muted">
    <div class="container">
      &copy; 2022 - RazorTest - <a asp-area="" asp-page="/Privacy">Privacy</a>
    </div>
  </footer>

_Layout.chstml.css：

body {
  background-color: #444;
}

header {
  border: 10px solid red;
}

form {
  border: 10px solid cyan;
}

input {
  border: 10px solid greenyellow;
}

nav {
  border: 10px solid blue;
}

div {
  border: 10px solid black;
}

main {
  border: 10px solid green;
}

img {
  width: 100px;
  height: 100px;
  border: 10px solid orange;
}

让我在 SS 上展示一下： _Layout.cshtml 和 _Layout.cshtml.css 文件

浏览器输出

当我将 CSS 文件移动到 wwwroot/css 目录并将其链接到 _Layout.cshtml 文件时，一切正常。这些标签的样式在添加到 site.css 文件时也适用。截图：

_Layout.cshtml 和 _Layout.cshtml.css 文件

浏览器输出

为什么某些标签的样式在添加到作用域 CSS 文件中时不起作用？

css asp.net-core razor header scoped
5个回答
5
投票

如果您使用 

.AddRazorRuntimeCompilation()
进行热重载，请尝试在不使用它的情况下进行构建。 除了上面提到的标签帮助程序问题之外，这是一个构建步骤。

需要注意的一件事是，CSS 隔离是一个构建步骤，因此它不适用于 Razor 运行时编译 除了上面提到的 tag-helper 问题之外，作用域 css 是构建时间

面临同样的问题并找到了这篇文章。

4
投票

在使用 Razor 页面测试 ASP.NET 6 中的 CSS 隔离时，我多次遇到类似的行为。

我注意到并非所有 HTML 元素都会收到作用域标识符，因此不受作用域 CSS 文件的影响。

这是我的最终 [PROJECT_NAME].styles.css 文件的一部分（作为链接元素包含在页面布局中）：

form[b-l6oslukat8] {
    background-color: orange;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

这是最终 HTML 文件的相关部分，其中标识符 (b-l6oslukat8) 应该是但不是：

<section b-l6oslukat8="" class="full page">
    <form data-form-type="login">
        <input b-l6oslukat8 type="text" id="Username" name="Username">
        <input b-l6oslukat8 type="password" id="Password" name="Password">
    </form>
</section>

看起来这也是您最终的 HTML/CSS 的情况。在我看来，这是 .NET 6 中 CSS 隔离实现的一个错误。

1
投票

我第一次尝试在 Razor Pages 中使用 CSS 隔离（又名作用域 CSS）时，刚刚遇到了这个问题两次。此问题影响我的 

header
元素和 
img
元素。我在 GitHub 上发现了这个问题：

https://github.com/dotnet/aspnetcore/issues/41507#issuecomment-1117287553

发生的事情是标签助手正在对 img 标签进行操作 这会导致该标记不被视为 HTML 标记。 CSS 隔离仅适用于 HTML 标记，因此这就是它不被使用的原因 在这种情况下应用（因为它不仅仅是一个标签）。

CSS隔离仅适用于文档内的HTML标签，否则 它可能会打破其他标签的隔离边界或 组件。

我们确实有一个关于使其他组件成为可能的问题 标签助手选择从调用/使用接收 CSS 范围 点，这将导致您正在寻找的内容。我会建议 你对这个问题投了赞成票，而不是 dotnet/razor#7606

作为解决方法，我们建议您将标签包装在另一个标签中 像 div 这样的元素，并更新你的 CSS 规则来解释它。

请注意最后一段中建议的解决方法。我发现这个解释是不可接受的，因为这会影响 header 元素，而 Razor Pages 中没有标签助手。

https://www.learnrazorpages.com/razor-pages/tag-helpers/

[编辑]我报告了这个问题。 https://github.com/dotnet/aspnetcore/issues/48225

0
投票

为什么某些标签的样式在添加到作用域 CSS 文件中时不起作用？

也许 iy 还不足以让你占据优先地位。

您可以尝试使用特异性或自然级联来覆盖样式，这样它就足以占据优先级。例如，您可以更改：

img {
  width: 100px;
  height: 100px;
  border: 10px solid orange;
}

到

body > div > img  {
    width: 100px;
      height: 100px;
      border: 10px solid orange;
}

如果你想改变既不能使用特异性也不能使用自然级联的样式，你可以尝试将样式添加到视图中，例如：

<style>
  body {
    background-color: #444;
  }

</style>
0
投票

我不久前对此实施了一个粗糙但有效的解决方案，我只是重用它，这促使我分享它。

因此，真正的问题是 .NET 更改了作用域 CSS，将作用域标识符属性（具有空值的“b-”属性，例如 b-phmxwtvfx5）添加到所有 CSS 规则中。这有效地解除了规则与 .NET 不在呈现的 Razor HTML 中添加范围标识符属性的元素的关联。

对于标签助手和其他缺失的元素（标题、img 等）来说也是如此。我的解决方案是自己在客户端添加。

$(document).ready(function() {
  var scopedID;
  const el = document.querySelector('#se');

  for (const attr of el.attributes) {
    if (attr.name.indexOf('b-') == 0) {
      console.log(attr + ": bingo!");
      scopedID = attr.name;
      break;
    }
  }

  var tagHelperInputs = document.querySelectorAll("input:not([" + scopedID + "] [readonly])");

  for (const inputEl of tagHelperInputs) {
    inputEl.setAttribute(scopedID, "");
  }

  var tagHelperLabels = document.querySelectorAll("label:not([" + scopedID + "])");

  for (const labelEl of tagHelperLabels) {
    labelEl.setAttribute(scopedID, "");
  }
});
.form-control.sa {
  max-width: 40ch;
}

label {
  font-weight: bold;
}

.form-grid-row {
  display: grid;
  grid-template-columns: 11ch auto;
  margin-bottom: 15px;
}
@page @model ParticipantPortalIdentity.Areas.KeystoneLogin.Pages.Account.AnswerSecurityQuestionsModel

<h1 id="se" class="h2">Security Questions</h1>
<h2 class="h3 mb-4">
  Please answer following security questions:
</h2>
<form asp-page-handler="CheckQAs">
  <div class="mb-3">
    <div class="form-grid-row">
      <label asp-for="SecurityQuestion1" class="form-label">Question </label><span class="">@Model.SecurityQuestion1</span>
      <label asp-for="SecurityAnswer1">Answer <span class="required-field-indicator fs-5">*</span></label>
      <input asp-for="SecurityAnswer1" size="25" class="form-control sa" autocomplete="off" autocapitalize="off" spellcheck="false">
    </div>
    <span asp-validation-for="SecurityAnswer1" class="alert alert-danger" role="alert"></span>
  </div>
  <div class="mb-3">
    <div class="form-grid-row">
      <label asp-for="SecurityQuestion2" class="form-label">Question </label><span>@Model.SecurityQuestion2</span>
      <label asp-for="SecurityAnswer2">Answer <span class="required-field-indicator fs-5">*</span></label>
      <input asp-for="SecurityAnswer2" size="25" class="form-control sa" autocomplete="off" autocapitalize="off" spellcheck="false">
    </div>
    <span asp-validation-for="SecurityAnswer2" class="alert alert-danger" role="alert"></span>
  </div>
  <div>
    <button type="submit" class="btn btn-fp-primary">Submit</button>&nbsp;<a href="~/" class="btn btn-primary">Cancel</a>
  </div>

我放置了一个 id“se”（scoped-ID 元素）来在客户端查询元素的属性，找到以“b-”开头的范围标识符（除非您将其更改为您的项目），然后将其添加到元素，按元素类型，我需要将其添加到。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.