时间戳

首页 > 解决方案 > 为什么字体粗细属性 (CSS) 在某些元素中不起作用？

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

问题描述

我的 HTML 代码中有一些跨度，其中我使用了 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>

标签： htmlcss

解决方案

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

以下是使用您提供的代码执行此操作的方法：

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

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

推荐阅读