Início / coding / Perguntas / 78849698
Accepted
Frasher Gray
Asked: 2024-08-09 01:23:15 +0800 CST

Prioridade de classe CSS no Blazor Webapp

  • 772

Estou tendo um problema em que, não importa o que eu tente, uma classe específica background-coloré sempre aquela a ser exibida na tela.

Código:

<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;
    }
}

Tentei primeiro retirar a classe de preenchimento na frente de toda a comparação, assim:

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

E passando fillpara depois gray, tanto dentro quanto fora do @ bit de código, mas nenhum deles funcionou. Alguém pode explicar o que está acontecendo e por quê?

c#

1 respostas

  1. Best Answer

    Não sou especialista em CSS. Não sei por que exatamente o CSS funciona assim.

    Você tem duas classes CSS: fill e grey, com a mesma especificidade . Você só pode aplicar background-coloruma vez ao elemento, então o CSS escolhe a regra que foi escrita por último . Observe que isso significa o último estilo definido em <style>, e não qual nome de classe é usado no atributo de classe.

    Você pode reordenar as entradas em seu <style>último .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>

    A outra opção é alterar o .grayseletor para ser mais específico, como .fill.gray. Isso significa "o elemento é preenchido e cinza". CSS verá que esta nova regra é mais específica e substituirá corretamente os estilos de .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>

    Você pode querer renomear todas as suas regras para seguir esta "hierarquia". Se fillfor usado apenas em elementos que também são btnClasse graysó existem para aumentar fill, você pode acabar com isto:

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

    Você também não poderia definir uma cor de fundo fille exigir que outra classe de cor fosse aplicada para definir a cor.

    Você também pode dar um tapa !importantno final de .gray's background-color, mas eu não recomendo fazer isso.

    • 1

relate perguntas