Question

我使用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>

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

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

3 个答案: