Переопределение подчеркивания ссылки для определенного div

Question

У меня есть <div> внутри <a>, который я не хочу подчеркивать.

HTML:

<a href="/joomla17/contact">
  <div class="button">nous contacter</div>
</a>

Общее правило a определено в другом месте.

Я попробовал это с помощью css:

.button {
    text-decoration: none;
}

но это все еще подчеркнуто. Проверено с помощью Firebug, что text-decoration: none не переопределено.

Я чувствую, что должен указать a:link, но я не знаю, как сделать так, чтобы он соответствовал моему классу

Answer 1

Поскольку вы используете div с display: inline;, в этом нет необходимости, поскольку a является встроенным элементом по умолчанию.Так зачем помещать встроенный контейнер внутрь встроенного элемента?

<a class="button" href="/joomla17/contact">nous contacter</a>

Но, возможно, у вас есть некоторые особые причины для этой сборки, так что это может быть решением с помощью div.Так как div находится внутри a, он наследует свойства a, поэтому обычно он также должен наследовать вещь подчеркивания.Но, возможно, вам нужно явно указать это в div.

.button, .button div { text-decoration:none; }

Возможно, вам нужно добавить !important перед ;, в зависимости от сложности вашего макета.

Answer 2

Попробуйте

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

чтобы избежать переопределения вашего стиля любым следующим правилом.

Если вы хотите использовать псевдо-классы для вашего a-элемента, это будет выглядеть так:

a:link{/* ... */} 
a:active{/* ... */} 
a:hover{/* ... */}
a:visited{/* ... */}

и если вы хотите получить доступ к div, когда ссылка имеет определенное состояние, используйте

a:hover .button{/* ... */}

например.