主页 / coding / 问题 / 78849698
Accepted
Frasher Gray
Asked: 2024-08-09 01:23:15 +0800 CST

Blazor Web 应用中 CSS 类优先级

  • 772

我遇到一个问题，无论我尝试什么，background-color屏幕上始终显示的是一个特定的类别。

代码：

<style>
.btnClass {
    border-radius:6px;
    padding: 5px;
    text-align:center;
    text-decoration:none;
    display: inline-block;
    font-size:1em;
}
.gray {
    background-color: #494949;
    border: 1px solid black;
    color: white;
}
.fill {
    width: 100%;
    height: 12%;
    background-color: lightcyan;
}
</style>

<button class="btnClass @(ExampleBoolean ? "fill" : "fill gray")">Example Button</button>
<button class="btnClass" @onclick="ChangeBool">Change Boolean</button>


@code {
    private bool ExampleBoolean = false;
    
    private void ChangeBool()
    {
        ExampleBoolean = !ExampleBoolean;
    }
}

我首先尝试将填充类放在整个比较前面，如下所示：

<button class="btnClass fill @(ExampleBoolean ? "" : "gray")">Example Button</button>

并移动fill到 之后gray，在 @ 代码段的内部和外部，但都没有起作用。有人能解释一下发生了什么以及为什么吗？

c#

1 个回答

  1. Best Answer

    我不是 CSS 专家。我不知道 CSS 为何如此运作。

    您有两个 CSS 类：fill 和 gray，具有相同的特异性。您只能background-color对元素应用一次，因此 CSS 选择最后编写的规则。请注意，这表示在中定义的最后一个样式<style>，而不是在 class 属性中使用哪个类名。

    您可以对条目进行重新排序，<style>以便将其列为.gray最后一个。

    .btnClass {
    border-radius:6px;
    padding: 5px;
    text-align:center;
    text-decoration:none;
    display: inline-block;
    font-size:1em;
}
.fill {
    width: 100%;
    height: 12%;
    background-color: lightcyan;
}
.gray {
    background-color: #494949;
    border: 1px solid black;
    color: white;
}
    <button class="btnClass fill">button with fill</button>
<button class="btnClass fill gray">button with fill and grey</button>

    另一个选项是将.gray选择器更改为更具体，例如.fill.gray。这表示“元素既是填充又是灰色”。CSS 将认为这个新规则更具体，并正确覆盖 中的样式.fill。

    .btnClass {
    border-radius:6px;
    padding: 5px;
    text-align:center;
    text-decoration:none;
    display: inline-block;
    font-size:1em;
}
.fill.gray {
    background-color: #494949;
    border: 1px solid black;
    color: white;
}
.fill {
    width: 100%;
    height: 12%;
    background-color: lightcyan;
}
    <button class="btnClass fill">button with fill</button>
<button class="btnClass fill gray">button with fill and grey</button>

    您可能希望重命名所有规则以遵循此“层次结构”。如果fill只应用于也是的元素btnClass，并且gray仅用于增强fill，则最终可能会得到以下结果：

    .btnClass {
  /* ... */
}
.btnClass.fill {
  /* ... */
}
.btnClass.fill.gray {
  /* ... */
}

    您也不能定义背景颜色fill，而要求应用另一个颜色类来设置颜色。

    您也可以将其拍到!important的末尾，但我建议不要这么做。.graybackground-color

    • 1

相关问题