стиль р тегов, но не тогда, когда у них есть теги - PullRequest
Новая
       70

стиль р тегов, но не тогда, когда у них есть теги

2 голосов
/ 15 января 2011

Мой первый пост здесь, к сожалению, он не будет таким захватывающим, и мне нужен ответ, включающий 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> текстом, а не абзацами со ссылками?

Спасибо.

Ответы [ 3 ]

1 голос
/ 15 января 2011

Вы можете легко сделать это с помощью jQuery: 

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

Live демо: http://jsfiddle.net/NyjvT/

Если вам нужно установить несколько стилей, учтите это: 

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

CSS: 

p.whatever { margin-botttom:0; font-size:20px; ... }
0 голосов
/ 15 января 2011

Это невозможно при использовании только 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, чтобы это работало.

0 голосов
/ 15 января 2011

Не думаю, что ты можешь.

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

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

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

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

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

...