如何将 css 伪选择器正确添加到 Blazor 项目

Question

在未能让 :focus 和 :hover 在结构类似的 .razor 文件中工作之后

<style>
...
    .login-button :focus{
        outline: 0 !important;
    }
...
</style>

<div>
...
    <button class="login-button">Login</div>
...
</div>

@code {
...
}

我找到了一个答案 here，它说这些类型的 css 选择器在文件中不能正常工作，或者当放入子 .css 类时，您可以对 .razor 文件执行此操作。

他们建议将 css 放在 wwwroot 文件夹中以使其正常工作，但我想知道这是一种解决方法，还是在 Blazor 中使用此类选择器的正确方法？

Answer 1

看起来是空格。这有效：

Test.razor

@page "/Test"
<h3>Test Page</h3>
<div class="m-5">
    <button class="login-button">Log In</button>
</div>
<style>
    .login-button:focus {
        outline: ridge !important;
    }
</style>

Test.razor.css

.login-button:hover {
    background-color: forestgreen;
}

/*.login-button:focus {
    outline: ridge !important;
}
*/

任你选择：

• 内联将应用于整个页面的所有匹配项。
• 隔离仅适用于特定组件。