他の Web サイトへのリンクをリストしているページがあります。各リンクの後には、リンク先のサイトの簡単な説明が続きます。リンク テキストを説明より少し大きくしたいので、CSS クラス定義 a.link を追加し、font-size を 16px と定義しました。完全なリストは標準<p>
タグ内にあり<hr>
、各リスト項目の間にタグがあります。問題は、リストの最初のリンクだけが新しいフォント サイズを取得することです。最初のリンク以降の各リンクは、リンク クラス定義だけでなく、<p>
タグでも定義されているすべてのスタイルを失います。タグを削除する<hr>
と、リスト内のすべてのアイテムが正しくスタイル設定されます。タグ内のリスト内の各リンクをラップする<p>
と、それらも正しくスタイル設定されますが、可能であれば余分なタグでリストを混乱させたくありません
これが私のスタイルシートコードです:
#pane {
float: right;
width: 800px;
}
#pane p {
margin-left: 15px;
font-family: verdana;
font-size: 12px;
}
#pane p a.link { font-size: 16px; }
生成された HTML のサンプルを次に示します。
<div id="pane">
<p>
<a href="http://www.google.com" class="link">Google</a> - For finding stuff
<hr>
<a href="http://www.newegg.com" class="link">Newegg</a> - For buying stuff
<hr>
</p>
</div>
他の誰かがこの動作に遭遇し、<p>
どこにでもタグを追加して修正する方法を見つけましたか?