为什么某些元素中的font-weight属性(CSS)不起作用?

时间:2019-04-01 21:34:17

标签: html css

我使用HTML的font-weight属性的HTML代码有些跨度。跨度按类别分组。在某些跨度中,该属性起作用,但在另一些跨度中,它不起作用,并且我不知道它为什么发生。下面是我的代码的一些摘录。

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>

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

在您的css文件中,尝试应用!重要规则,看看是否可以解决问题。此规则将覆盖样式表的默认级联属性,并为字体粗细赋予更高的优先级。

您可以按照以下步骤使用提供的代码进行操作:

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

如果这行得通,那么您将需要查看样式表以找出覆盖字体粗细的内容。使用!Important规则违反大多数约定,因为它可能导致其他事情中断,并使调试代码成为噩梦,但是您可以在这种情况下使用它,以查看样式表的级联是否存在问题。解决问题后,只需确保将其删除即可。

答案 2 :(得分:0)

要解决此问题,您可以在font-weight值之后添加关键字!important 以覆盖所有其他CSS CSS font-weight。