стилизация тегов p, но не тогда, когда у них есть теги

Мой первый пост здесь, и, к сожалению, он будет не таким захватывающим, и мне нужен ответ, который включает IE6.

Чтобы получить пространство между абзацами, я оформляю теги <p> следующим образом:

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

Нижнее поле для размещения абзацев. Это, конечно, работает нормально. Но тогда мне также нужно оформить ссылку с помощью html:

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

Когда есть ссылка, как в приведенном выше примере, я не хочу, чтобы применялось нижнее поле. Я попытался исправить это с помощью этого:

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

Что, конечно, не работает.

Я добавляю класс к тегам <a> с помощью jQuery, чтобы я мог автоматически добавлять значок к ссылкам. я пытался добавить

margin-bottom: 0px !important;

в класс, который я добавляю с помощью jQuery, но это тоже не сработало.

Как лучше всего оформить интервал между <p>paragraphs</p> текстом, но не абзацами со ссылками?

Спасибо.


css paragraph spacing
person user576231    schedule 14.01.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете легко сделать это с помощью 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; ... }
person Šime Vidas    schedule 14.01.2011

arrow_upward
0
arrow_downward

Я не думаю, что вы можете.

Лучше всего добавить класс к этим конкретным элементам <p> и переопределить поля для них:

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

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

Если это невозможно на стороне сервера, вы можете сделать некоторые хакерские действия jQuery, чтобы позаботиться об этом.

Может быть, есть какая-то магия CSS3, которую можно было бы использовать, но я не уверен в этом; и поскольку вам нужна поддержка IE6, об этом в любом случае не может быть и речи.

person Thomas    schedule 14.01.2011

arrow_upward
0
arrow_downward

Это невозможно, используя только CSS.

CSS (каскадные таблицы стилей) работает только вниз по дереву документа.

Причиной этого является производительность.

Для получения дополнительной информации прочитайте это:

http://snook.ca/archives/html_and_css/css-parent-selectors

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3940

Вам нужно использовать javascript, чтобы это работало.

person PeeHaa    schedule 14.01.2011