如何正确地将 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 class 你可以为 .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;
}
*/

任你选：

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

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

How to properly add css pseudo selectors to a Blazor project

html

css

css-selectors

dom-events

blazor

Test.razor

Test.razor.css