色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

Razor頁面- CSS隔離-一些HTML標簽的樣式不起作用

CSS
錢衛國2年前8瀏覽0評論

我正在嘗試使用Razor Pages和CSS隔離來設計我的ASP.NET Web應用程序中的body、header和form標簽。在作用域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文件中時不起作用？

如果你使用。AddRazorRuntimeCompilation()用于熱重載，嘗試不使用它進行構建。 除了上面提到的標記助手問題，這是一個構建步驟。

只有一點需要注意，CSS隔離是一個構建步驟，所以它不支持Razor運行時編譯 除了上面提到標簽助手問題，作用域css是構建時間

面臨同樣的問題，發現了這篇文章。

我在用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也是如此。在我看來這是CSS隔離在。NET 6。

為什么一些標簽的樣式在添加到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>

我第一次嘗試在Razor頁面中使用CSS隔離(也稱為范圍CSS)時，就遇到過兩次這個問題。這個問題影響了我的header元素和一個img元素。我在GitHub上發現了這個問題:

https://github . com/dot net/aspnetcore/issues/41507 # issue comment-1117287553

這里發生的事情是一個標記助手正在對img標記進行操作 這導致標簽不被視為HTML標簽。半鑄鋼?鋼性鑄鐵(Cast Semi-Steel) 隔離只適用于HTML標簽，所以這就是為什么它沒有被 適用于這種情況(因為它不僅僅是一個標簽)。

CSS隔離僅適用于文檔中的HTML標記，否則為 這可能會打破其他標簽的隔離邊界 組件。

我們確實有一個問題，使其他組件和 標記助手以選擇加入接收來自調用/使用的CSS范圍 點，這將產生您所尋找的結果。我建議 您投票支持這一期，而不是第7606期

作為一種變通方法，我們建議您將標記包裝在另一個 元素，并更新您的CSS規則來解決它。

請注意最后一段中建議的解決方法。我發現這種解釋是不可接受的，因為這影響了header元素，而在Razor頁面中沒有tag helper。

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

[編輯]我舉報了這個問題。https://github.com/dotnet/aspnetcore/issues/48225