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

Question

我的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>

Answer 1

從你提供的代碼片段中，我猜你的問題來自CSS的級聯，因為它似乎在jsbin中正確呈現 。 我建議驗證你的CSS，並確保沒有一個規則覆蓋你的.redasterisk 。 如果您的元素沒有被其他CSS覆蓋，請檢查您的開發工具。 這是我發現的一篇CSS Tricks文章，詳細介紹了級聯的工作原理

Answer 2

在您的css文件中，嘗試應用！重要規則，看看是否能解決問題。 此規則將覆蓋樣式表的默認級聯屬性，並為font-weight提供更高的優先級。

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

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

如果這樣可行，那么您需要查看樣式表以找出覆蓋字體粗細的內容。 使用！重要規則是違反大多數約定的，因為它可能導致其他事情中斷，並且它使調試代碼成為一場噩夢，但是你可以在這樣的情況下使用它來查看樣式表的級聯是否存在問題。 解決問題后，請務必將其刪除。

Answer 3

對於修復，您可以在font-weight值之后添加關鍵字！important以覆蓋所有其他css font-weight。