2015-08-18 5 views
2

У меня есть следующий код:Удаления подчеркивание из ссылки

<html> 
<head> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <style> 
     .nodecor 
     { 
      text-decoration: none; 
     } 

     .strowb1 
     { 
      width: 150px; 
      height: 35px; 
      background-color: #1F375F; 
      text-align: center; 
      color: #999999; 
      font-family: calibri; 
      font-weight: bold; 
      font-size: 110%; 
      display: block; 
     } 
     .fullcell 
     { 
      height: 100%; 
      width: 100%; 
      color: #999999; 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td class="strowb1"> 
       <a class="nodecor" href="#"> 
        <div class="fullcell">Watch</div> 
       </a> 
      </td> 
     </tr> 
    </table> 
</body> 
</html> 

При выполнении «Часы» имеет очень стойкое подчеркивание на парении. Значение text-decoration: none похоже не удаляет его.

Я попытался установить текстовое украшение ни на стол, ни на tr, td, ни на div.

pwatch

Просьба предложить идеи, чтобы сделать это.

Примечание: Удаление ссылки на bootstrap css удаляет подчеркивание, но мне нужно это в других областях кода.

+0

Попробуйте, если это сработает для вас: '.nodecor {text-decoration: none! Important; } ' – deepakb

ответ

5

Вы должны увеличить специфичность данного правила, поскольку самозагрузки цели a:hover и имеет преимущество. Другой вариант - поставить одно и то же конкретное правило после начальной загрузки. Если два объявления имеют одинаковую массу, происхождение и специфичность, последний указывает выигрыши.

.nodecor:hover { 
 
    text-decoration: none; 
 
} 
 
.strowb1 { 
 
    width: 150px; 
 
    height: 35px; 
 
    background-color: #1F375F; 
 
    text-align: center; 
 
    color: #999999; 
 
    font-family: calibri; 
 
    font-weight: bold; 
 
    font-size: 110%; 
 
    display: block; 
 
} 
 
.fullcell { 
 
    height: 100%; 
 
    width: 100%; 
 
    color: #999999; 
 
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<table> 
 
    <tr> 
 
    <td class="strowb1"> 
 
     <a class="nodecor" href="#"> 
 
     <div class="fullcell">Watch</div> 
 
     </a> 
 
    </td> 
 
    </tr> 
 
</table>

Ссылка: MDN - Specificity - w3.org - Cascading order

+0

Только ответ, который объясняет реальную причину, по которой это происходит +1 – Hele

3

Попробуйте это:

<style> 
a{ 
text-decoration:none; 
} 
a:hover 
{ 
    text-decoration: none; 
} 
<style> 

Настройка текста украшения для Div, и другие таблицы конкретных тегов не является полезным. Это свойство специально определено для метки привязки <a>.

См., Если это помогает.

+0

Не работает. Также обратите внимание на вопрос. У тега уже установлено значение none. – Hele

+0

@Hele Обновлен мой ответ, попробуйте это. –

0

Возможно, он не удаляет его, потому что он находится под полным набором. Попробуйте

.nodecor .fullcell { 
    text-dcoration:none; 
} 
1

надстройку также

.nodecor:hover 
{ 
    text-decoration: none; 
} 
0

Он будет удалить линию по наведению:

a:hover 
{ 
    text-decoration: none; 
} 
0

Используйте этот CSS

.strowb1 a:hover { 
    text-decoration: none; 
} 
-1

a: hover, a: active, a: focus использовать также те, потому что если вы проверите с помощью инструментов разработчика (google chrome), вы увидите это. a:hover не достаточно

.nodecor:hover, .nodecor:active.nodecor:focus { 
    text-decoration: none;} 
Смежные вопросы