Por que a decoração de texto do Bootstrap: none não funciona?

Question

Mar 23, 2017, 02:48 AM

twitter-bootstrap css3 twitter-bootstrap-3 css

Por que a decoração de texto do Bootstrap: none não funciona?

PERGUNTA, QUESTÃO:

Por que o Bootstrap não remove os sublinhados de hiperlink com seustext-decoration: none?

DEMOLIR:

Por padrão, o Bootstrap fornece todos os hiperlinkstext-decoration: none com o CSS de baixa especificidade:

a {
  text-decoration: none;
}

No entanto, isso não remove o sublinhado padrão dos hiperlinks:

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <a href="#">Should have no text-decoration</a> (through Bootstrap)
</body>

Não há regras com especificidade maior quetext-decoration: none. De fato, não há outras regras que afetem a decoração de texto emtudo. Quando o Bootstrap é removido e o mesmo CSS é adicionado em seu lugar, a decoração de textoé removido:

a {
  text-decoration: none;
}

<a href="#">Should have no text-decoration</a> (inline)

O Bootstrap também parece ter 'prioridade' com esse comportamento; quando você usa o CSS acima em conjunto com o Bootstrap, não importa se sua declaração tem mais especificidade ou não; os links ainda serão sublinhados:

a, div a {
  text-decoration: none;
}

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <a href="#">Bootstrap has higher specificity</a>
  <div>
    <a href="#">Inline CSS has higher specificity</a>
  </div>
</body>

É interessante notar que adicionar!important remove a decoração, mesmo que não haja declarações 'mais específicas':

a {
  text-decoration: none !important;
}

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <a href="#">!important</a>
</body>

Então, por que o Bootstrap não remove o sublinhado de hiperlink padrão com sua implementação detext-decoration: none?