записи могут испортить отображение вашей страницы / сделать ее недействительной).

ователи могут вводить описания, которые могут включать абзацы или списки. Или они могут просто ввести текст без каких-либо вложений<p> или же<ul> элементы. Что мне нужно сделать, это удалить большую часть отступов и полей над первым элементом и под последним элементом, чтобы пользователь ввелу контента есть хорошая жесткая граница вокруг, Таким образом, я мог сделать одно из следующего:

Используйте правило css, о котором я не знал, чтобы настроить таргетинг только на первый и последний элементыИспользуйте css3 или html5 (я полагаю, что в них есть что-то, что позволяет легко делать то, что я хочу) и надеюсь, что все обновят свои браузеры как можно скорее, в то время как старые браузеры просто получают немного более уродливую версию страницыНайти первый и последний элементы с помощью Javascript и соответственно изменитьИзменить HTML, чтобы добавить класс, как<p class="first">

В идеале 1-е решение существует, не так ли? Я согласен со вторым решением, хотя, если нет, существует ли оно? Последние 2 мне все равно ...

ОБНОВИТЬ: не волнует IE6. Но мне нужно разобраться с ситуацией, что если есть только текст для начала, без каких-либо<p> или же<ul> или другие элементы, тогда на самом деле ничего не нужно делать для верхнего поля / отступа.

 BoltClock♦10 янв. 2011 г., 19:55
Пример сгенерированного HTML был бы хорош.

Ответы на вопрос(4)

использование:first-child а также:last-child нравится. Обратите внимание, что> а также:first-child (CSS2) не работает в IE6 и ниже, и:last-child (CSS3) не работает в IE8 и ниже. Единственный реальный обходной путь для обоих заключается в использовании.first а также.last класс соответственно (вы можете добавлять их динамически с помощью JavaScript, как говорит Phrogz).

.description > p, .description > ul {
    margin: 1.5em 0;
}

.description > :first-child {
    margin-top: 0;
}

.description > :last-child {
    margin-bottom: 0;
}

Я добавил> комбинатор для предотвращения таких элементов, какstrong или жеli быть выбранным.Что это значит?

 at.10 янв. 2011 г., 20:54
если бы в начале содержимого был текст, ваш код выше сделал бы его таким, чтобы первый абзац или неупорядоченный список ПОСЛЕ первоначального текста сливался с этим исходным текстом, верно? Есть ли способ, чтобы этого не случилось?
 BoltClock♦10 янв. 2011 г., 20:03
@Phrogz: Да, конечно.
 Phrogz10 янв. 2011 г., 20:00
Обратите внимание, что вы можете использовать JS для.last-child Класс процедурно для тех браузеров, которые не поддерживают селектор CSS.
 at.10 янв. 2011 г., 20:49
if: first-child работает в IE7 и выше, для меня этого достаточно. Я мог бы просто сделать так, чтобы все разрешенные элементы имели небольшой нижний отступ / отступ, и чтобы первый элемент имел такой же отступ / отступ.
 BoltClock♦11 янв. 2011 г., 03:41
@at: Вам нужно было бы найти способ обернуть блуждающий текст в свой собственный<p>.

полем? Требуется, чтобы содержимое было как минимум обернуто в одинp элемент (не сложно проверить / добавить мелодраматически).

CSS:

.container {border:1px solid black;}
.container .subcontainer {margin:-1em 0;}
.container p {margin:1em 0;}

HTML:

<div class="container"><div class="subcontainer">
    <p>My first paragraph.</p>
    <p>My second paragraph.</p>
</div></div>
 at.10 янв. 2011 г., 20:36
Я учел это и собирался перечислить это как последний вариант ... проблема в том, что это становится сложнее, потому что я не знаю, какой тип HTML пользователь собирается добавить. Мне нравятся вещи, которые не являются хитрыми ...
 Rudu10 янв. 2011 г., 21:06
К сожалению, поскольку некоторые (к сожалению, популярные) браузеры не поддерживают маршрут CSS, ни одно из них не является особенно простым решением. Ты упомянулP или жеUL поэтому я думал, что ввод ограничен этими двумя, если это не так, я надеюсь, что вы фильтруете по некоторым тегам (<script> позволит все виды инъекций) и убедиться, что контент действителен (один<div> с двумя</div> записи могут испортить отображение вашей страницы / сделать ее недействительной).

Что-то вроде этого?

.container * + p, .container * + ul
{
  margin: 1em 0 0;
}

.container p, .container ul
{
  margin: 0;
}
 at.10 янв. 2011 г., 20:37
Это + работает во всех браузерах IE7 и выше?
 zzzzBov11 янв. 2011 г., 01:47
Я верю в это, но вы должны проверить это, чтобы быть уверенным.

но IE8 и более ранние версии игнорируют:...-child псевдо-селекторы.

Вы можете использовать jQuery для достижения той же цели, ориентируясь на большее количество браузеров.

//On ready...
$(function(){
  //Update styles dynamically
  $('ul:last').css({'margin-bottom':0,'padding-bottom':0});
  $('ul:first').css({'margin-top':0,'padding-top':0});
});
 BoltClock♦01 сент. 2011 г., 10:02
Поддержка IE7 и IE8:first-child, по крайней мере.

Ваш ответ на вопрос