为什么font-weight属性（CSS）在某些元素中不起作用？

Question

I have somes spans in my HTML code in which I used the font-weight property of CSS. The spans are grouped by a class. In some of the spans the property works, but in others it does not works, and I do not know why it is happening. Below there are some excerpts of my code.

CSS code:

    .redasterix{
    color: rgb(240, 83, 50);
    font-size: 18px;
    font-weight: 700;
}

HTML code:

<h3>Informação pessoal</h3>
            <ul>
                <form>
                <li>Nome<span class="redasterix">*</span> <input type="text" name="nome" required></li>
                <li>Sobrenome<span class="redasterix">*</span> <input type="text" name="sobrenome" required></li>
                <li>Título<span class="redasterix">*</span> <input type="text" name="titulo" required></li>
                <li>Empresa<span class="redasterix">*</span> <input type="text" name="empresa" required></li>
                <li>Endereço 1 <input type="text" name="endereço1"></li>
                <li>Endereço 2 <input type="text" name="endereço2"></li>
                <li>Cidade<span class="redasterix">*</span> <input type="text" name="cidade" required></li>
                <li>
                    Estado<span class="redasterix">*</span> <select required>
                        <option value="selecionar"></option>
                        <option value="acre">Acre</option>
                        <option value="alagoas">Alagoas</option>
                        <option value="amapá">Amapá</option>
                        <option value="amazonas">Amazonas</option>
                        <option value="bahia">Bahia</option>
                        <option value="ceará">Ceará</option>
                        <option value="distritofederal">Distrito Federal</option>
                        <option value="espiritosanto">Espírito Santo</option>
                        <option value="goias">Goiás</option>
                        <option value="maranhao">Maranhão</option>
                        <option value="matogrosso">Mato Grosso</option>
                        <option value="matogrossodosul">Mato Grosso do Sul</option>
                        <option value="minasgerais">Minas Gerais</option>
                        <option value="para">Pará</option>
                        <option value="paraiba">Paraíba</option>
                        <option value="parana">Paraná</option>
                        <option value="pernambuco">Pernambuco</option>
                        <option value="piaui">Piauí</option>
                        <option value="riodejaneiro">Rio de Janeiro</option>
                        <option value="riograndedonorte">Rio Grande do Norte</option>
                        <option value="riograndedosul">Rio Grande do Sul</option>
                        <option value="rondonia">Rondônia</option>
                        <option value="roraima">Roraima</option>
                        <option value="santacatarina">Santa Catarina</option>
                        <option value="saopaulo">São Paulo</option>
                        <option value="sergipe">Sergipe</option>
                        <option value="tocantins">Tocantins</option>
                    </select>
                </li>
                <li>CEP<span class="redasterix">*</span> <input type="text" required></li>
                <li>País/Região<span class="redasterix">*</span> Brasil</li>
                <li>Email<span class="redasterix">*</span> <input type="email" required></li>
                <li>Telefone<span class="redasterix">*</span> <input type="tel" required></li>
            </form>

Answer 1

From the snippet you've provided, I'd guess that your problems comes from CSS's cascade as it seems to be rendering properly in jsbin . I would suggest verifying your CSS and making sure that there isn't a rule that overwrites your .redasterisk . Check in your dev tools if your element isn't being overwritten by some other CSS. Here's a CSS Tricks article I found that goes in detail into how the cascade works

Answer 2

In your css file, try applying the !Important rule and see if that fixes the problem. This rule will override your style sheet's default cascading properties and give the font-weight a higher priority.

Here's how you can do that with the code that you provided:

.redasterix{
   color: rgb(240, 83, 50);
   font-size: 18px;
   font-weight: 700 !important;
}

If this works, then you will need to take a look at your stylesheet to figure out what is overriding the font-weight. It's against most conventions to use the !Important rule because it can cause other things to break and it makes debugging your code a nightmare, but you can use it in cases like this to see if you have an issue with your stylesheet's cascade. Just be sure to remove it after you fix the problem.

Answer 3

对于修复，您可以在font-weight值之后添加关键字！important以覆盖所有其他css font-weight。