特定の部門のリンクアンダーラインを無効にする

Question

の中に<div>があります。私は下線を付けたくありません。

HTML：

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

ジェネリックaルールが別の場所で定義されています。

私は、CSSでこれを試してみました：

.button { 
    text-decoration: none; 
} 

を、それはまだ下線が引かれています。 text-decoration: noneがオーバーライドされていないことをFirebugで確認しました。

私はa:linkを指定する必要があることを感じ、私はそれがあなたのスタイルは、任意の次のルールによって上書きされることを避けるために

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

を試してみてください私のクラス

Answer 1

display: inline;とdivを使用しているため、デフォルトではaがインライン要素であるため、不要です。では、なぜインラインコンテナをインライン要素の中に置くのでしょうか？

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

しかし、このビルドには特別な理由があるかもしれないので、これはdivのソリューションになる可能性があります。 divはaの内部にあるため、aのプロパティを継承しているため、通常は下線も継承する必要があります。しかし、おそらくdivに明示的に設定する必要があります。

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

たぶん、あなたは;の前で!importantを追加する必要があり、レイアウトの複雑さに依存します。

Answer 2

を一致させる方法がわかりません。

あなたはA-要素上の擬似クラスを使用したい場合は、次のようになります。

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

を、あなたはdiv要素にアクセスする場合、リンクは

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

特定の状態での使用を持っています例えば、

。