css - p タグをスタイリングしますが、タグがある場合はスタイリングしません

Question

ここでの私の最初の投稿は、残念ながらそれほどエキサイティングではなく、IE6 を含む回答が必要です。

段落間にスペースを確保するために、タグを次のようにスタイリングしてい<p>ます。

div.content_cms p {
 margin-top: 0px;
 margin-bottom: 15px;
 padding: 0px 15px 0px 0px;
}

段落の間隔を空けるマージンの下。これはもちろんうまくいきます。しかし、html でリンクのスタイルを設定する必要もあります。これは次のとおりです。

<p><a href="#">Text</a> </p>

上記の例のようにリンクがある場合、margin-bottom を適用したくありません。私はこれでそれを修正しようとしました：

div.content_cms p a {
 margin-bottom: 0px !important;
}

もちろん、これは機能しません。

<a>リンクにアイコンを自動的に追加できるように、jQuery を使用してタグにクラスを追加しています。追加してみました

margin-bottom: 0px !important;

jQueryで追加しているクラスに追加しましたが、それも機能しませんでした。

<p>paragraphs</p> リンクを含む段落ではなく、テキストの間隔をスタイルする最良の方法は何ですか?

ありがとうございました。

score 1 · Accepted Answer

これは jQuery で簡単に実行できます。

$('p').has('a').css('margin-bottom', 0);

ライブデモ: http://jsfiddle.net/NyjvT/

複数のスタイルを設定する必要がある場合は、次のことを考慮してください。

$('p').has('a').addClass('whatever');

CSS:

p.whatever { margin-botttom:0; font-size:20px; ... }

score 0 · Accepted Answer

これは、CSSだけでは不可能です。

CSS（Cascading Style Sheets）は、ドキュメントツリーの下でのみ機能します。

この理由はパフォーマンスです。

詳細については、こちらをお読みください。

それを機能させるには、JavaScriptを使用する必要があります。

score 0 · Accepted Answer

私はあなたができるとは思わない。

あなたの最善の策は、これらの特定<p>の要素にクラスを追加し、それらのマージンをオーバーライドすることです:

div.content_cms p.nomargin {
    margin-bottom: 0px;
}

<p class="nomargin"><a href="#">Text</a></p>

これがサーバー側で不可能な場合は、jQuery ハッカーを実行して対処できます。

使用できる CSS3 マジックがいくつかあるのかもしれませんが、それについてはわかりません。IE6のサポートが必要なので、とにかく問題外です。

3 に答える 3