为 p 标签设置样式，但在它们有标签时不设置答案

【问题标题】：styling p tags but not when they have a tags为 p 标签设置样式，但在它们有标签时不设置
【发布时间】：2011-01-15 06:07:02
【问题描述】：

我在这里的第一篇文章，不幸的是它不会那么令人兴奋，我需要一个包含 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;
}

这当然行不通。

我正在使用 jQuery 向 <a> 标签添加一个类，这样我就可以自动向链接添加一个图标。我尝试添加

margin-bottom: 0px !important;

添加到我使用 jQuery 添加的类中，但这也不起作用。

在<p>paragraphs</p> 之间使用文本而不是带有链接的段落设置间距的最佳方式是什么？

谢谢。

【问题讨论】：

【解决方案1】：

您可以使用 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; ... }

【讨论】：

【解决方案2】：

我不认为你可以。

最好的办法是为那些特定的 <p> 元素添加一个类，并覆盖这些元素的边距：

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

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

如果这在服务器端是不可能的，你可以做一些 jQuery 黑客来处理它。

也许可以使用一些 CSS3 魔法，但我不确定；既然你想要 IE6 支持，那无论如何都是不可能的。

【讨论】：

【解决方案3】：

仅使用 CSS 是不可能的。

CSS（层叠样式表）仅在文档树的下方起作用。

这样做的原因是性能。

你需要使用 javascript 才能工作。

【讨论】：