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

r8xiu3jd 于 2023-05-19 发布在其他

关注(0)|答案(4)|浏览(257)

我试图在我的ASP.NETWeb应用程序中使用RazorPages和CSSIsolation来设计主体、标题和表单标签的样式。在作用域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 and _Layout.cshtml.css files
Browser output
当我将CSS文件移动到wwwroot/css目录并将其链接到_Layout.cshtml文件时，一切都很好。这些标签的样式在添加到site.css文件时也有效。截图：
_Layout.cshtml and _Layout.cshtml.css files
Browser output
为什么一些标签的样式在添加到作用域CSS文件中时不起作用？

css

来源：https://stackoverflow.com/questions/71608095/razor-pages-css-isolation-styles-for-some-html-tags-are-not-working

4条答案

按热度按时间

lb3vh1jj1#

如果使用.AddRazorRuntimeCompilation()进行热重载，请尝试不使用它进行构建。除了上面提到的tag-helper问题之外，这是一个构建步骤。
需要注意的一点是，CSS隔离是一个构建步骤，所以它不适用于Razor运行时编译。除了上面提到的标记助手问题，scoped css是构建时的问题。
遇到同样的问题，发现this article.

赞(0）回复(0）举报 2023-05-19

pu3pd22g2#

在ASP.NET6中使用Razor页面测试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-l 6 oslukat 8）应该是但不是：

<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隔离实现中的一个错误。

赞(0）回复(0）举报 2023-05-19

2g32fytz3#

为什么一些标签的样式在添加到作用域CSS文件中时不起作用？
也许我还不足以占据优先地位。
您可以尝试使用特定性或自然级联来覆盖样式，以便它可能足以优先。例如，您可以更改：

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）回复(0）举报 2023-05-19

xwbd5t1u4#

我在第一次尝试使用CSS隔离（a.k.a.）时遇到了两次这个问题。Razor Pages中的scoped CSS）。这个问题影响了我的header元素和一个img元素。我在GitHub上发现了这个问题：
https://github.com/dotnet/aspnetcore/issues/41507#issuecomment-1117287553
这里发生的是一个标记帮助器在img标记上起作用，这导致该标记不被视为HTML标记。CSS隔离只适用于HTML标签，所以这就是为什么它不适用于这种情况（因为它不仅仅是一个标签）。
CSS隔离仅适用于文档中的HTML标记，否则可能会破坏其他标记或组件的隔离边界。
我们确实有一个问题，使其他组件和标记帮助器能够选择从调用/使用点接收CSS范围，这将导致您正在寻找的内容。我建议您对此问题投赞成票，而不是dotnet/razor#7606
作为一种解决方法，我们建议您将标签 Package 在另一个元素（如div）中，并更新您的CSS规则以解决它。
请注意最后一段中提出的解决方法。我觉得这个解释是不可接受的，因为这影响了一个头元素，而在Razor Pages中没有标记帮助器。
https://www.learnrazorpages.com/razor-pages/tag-helpers/
[编辑]我报告了这个问题。https://github.com/dotnet/aspnetcore/issues/48225

赞(0）回复(0）举报 2023-05-19

我来回答

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

4条答案

相关问题

热门标签

最新问答