text-decoration: underline ignored

Question

Я пытаюсь создать группу списка, чтобы текст элемента группы не подчеркивался. Некоторые из моего сайта CSS уже включает в себя

a:link, a:visited { 
text-decoration: underline; 
} 

По какой-то причине

style="text-decoration: none;" 

игнорируется.

HTML:

<div class="list-group"> 
    <a href="#" class="list-group-item"> 
    <h4 class="list-group-item-heading">Link 1</h4> 
    <p class="list-group-item-text">Info about link1. Underline this text.</p> 
    </a> 
    <a href="#" class="list-group-item"> 
    <h4 class="list-group-item-heading">Link 2</h4> 
    <p class="list-group-item-text" style="text-decoration: none;">Info about link2. Don't underline this text.</p> 
    </a> 
</div><!-- list-group --> 

CSS (из других источников на моем сайте)

a:link, a:visited { text-decoration: underline; } 

Codepen link

Answer 1

Попробуйте это .. это даст подчеркнет Link 2, а не для текста пункта

a:link, a:visited { 
 
text-decoration: underline; 
 
} 
 

 
.nounderline{ 
 
    text-decoration: none !important; 
 
} 
 

 
.underline{ 
 
    text-decoration: underline !important; 
 
}

<div class="list-group"> 
 
    
 
\t <a href="#" class="list-group-item"> 
 
\t \t <h4 class="list-group-item-heading">Link 1</h4> 
 
\t \t <p class="list-group-item-text">Info about link1. Underline this text.</p> 
 
\t </a> 
 
    
 
\t <a href="#" class="list-group-item nounderline"> 
 
\t \t <h4 class="list-group-item-heading underline">Link 2</h4> 
 
\t \t <p class="list-group-item-text nounderline" >Info about link2. Don't underline this text.</p> 
 
\t </a> 
 
    
 
</div>

Answer 2

Это потому, что вы претендуете на text-decoration: none инлайн-стиль в p элемента.

Изменить на:

<a href="#" class="list-group-item" style="text-decoration: none;> 
    <h4 class="list-group-item-heading">Link 2</h4> 
    <p class="list-group-item-text">Info about link2. Don't underline this text.</p> 
</a> 

Обратите внимание, как a тег теперь имеет стиль, а не p тегов. Прекрасно работает: http://codepen.io/anon/pen/ZGMGdN

Answer 3

Вы можете сделать это с помощью CSS.

Ваш CSS не работает, потому что использует определенные псевдоклассы, где унаследованные стили адресуются больше, чем определенные псевдоклассы, которые вы идентифицируете.

Ваш оригинальный код:

a:link, a:visited { 
    text-decoration: underline; 
} 

Наследственный код от других стилей:

a { 
    text-decoration: underline; 
} 

Измените код следующим образом:

a { 
    text-decoration: none; 
} 

и она работает правильно: http://codepen.io/anon/pen/qdMdzZ

Answer 4

У вас есть проблема со спецификой, а также применение стиля к неправильному элементу. Убедитесь, что вы применили его к тегу a. Например, дайте тегу собственный класс и примените к нему CSS.

a.no-underline { 
    text-decoration: none; 
} 

Пример: http://codepen.io/anon/pen/aOaOgO