html - 为什么字体粗细属性 (CSS) 在某些元素中不起作用？

Question

我的 HTML 代码中有一些 span，我在其中使用了 CSS 的 font-weight 属性。跨度按类分组。在某些跨度中，该属性有效，但在其他跨度中不起作用，我不知道为什么会这样。下面是我的代码的一些摘录。

CSS 代码:

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

HTML代码:

<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

根据您提供的片段，我猜您的问题来自 CSS 的级联，因为它似乎在 jsbin 中正确呈现。 .我建议验证您的 CSS 并确保没有覆盖您的 .redasterisk 的规则。如果您的元素没有被其他 CSS 覆盖，请检查您的开发工具。这是我发现的一篇 CSS 技巧文章，详细介绍了 how the cascade works