различное форматирование css на разных тегах <p>

Question

Я создаю веб-сайт, где я читаю HTML-данные с других веб-сайтов.

Проблема в том, что в источнике, который я читаю, есть теги <p>, но я действительно хочу отформатировать их по-другому

есть ли способ использовать несколько тегов <p> с одним форматированием, а некоторые теги <p> могут выполнять другое форматирование на той же веб-странице?

Answer 1

Оберните импортированный контент примерно так:

<div class='imported'>
<p>Imported content here...</p>
<p>These paragraph tags were imported...</p>
</div>

и стиль как это:

div.imported p {
    /* My style for imported <p>s */
}

Редактировать В ответ на комментарий о стилизации ваших собственных <p> s вы можете стилизовать все <p> s на странице с помощью стандартного правила, подобного этому:

p {
    /* Style for all <p>s */
}

, и тогда более конкретное правило для импортированных <p> s переопределит это правило.

Редактировать : В ответ на комментарий о встроенных стилях вы можете переопределить их с помощью !important, но это повлияет на людей с таблицами стилей пользователя. Я не верю, что для этого есть чистое решение только для CSS - вам может понадобиться разобрать импортированный HTML в конце концов.

Answer 2

Да, если у тегов разные классы CSS, например,

HTML

<p class="foo-site">This is some content lifted from Foo Site.</p>
<p class="bar-site">This is some content lifted from Bar Site.</p>

CSS

p.foo {
    /* Style for Foo Site text */
}

p.bar {
    /* Style for Bar Site text */
}

Answer 3

<div class="includedContent">
<p>a paragraph</p>
</div>
<p>Another paragraph</p>

с

p { font-size: 8pt; }
div.includedContent p { font-size: 10pt; }

Answer 4

Да, вы, вероятно, можете придать им специфичность примерно так

p:first-child { /* note this won't work in ie6 */
    border: 1px solid red;
}

p.main {
    background: pink;
}

Если у вас нет доступа к изменению HTML, и ДЕЙСТВИТЕЛЬНО нужно добавить классы (чтобы он работал в IE6), вы можете использовать jQuery (имейте в виду, что пользователи без JS не увидят ни одного из ваших классов добавлено так)

$('#content p:last').addClass('last');

Answer 5

Вы можете использовать jQuery для добавления css ко всем четным и нечетным <p> s следующим образом:

$("p:even").css("background-color", "#bbbbff");

$("p:odd").css("background-color", "#aaaaff");

Answer 6

В разметке должно быть что-то, чтобы отличать абзацы друг от друга.

Одна группа может быть членом данного класса или может быть потомками элемента с конкретным идентификатором или некоторым количеством другое состояние .

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

Учебное пособие поможет вам узнать о типах правил, которые вы можете использовать.

Поскольку вы говорите, что импортируете HTML с других веб-сайтов (я надеюсь, что вы осторожны, похоже, вы рискуете позволить им вставить вредоносный код на ваши страницы), вы должны иметь возможность обернуть импортированный код в элемент div, вероятно, будет лучше), что вы можете дать класс или идентификатор и использовать селектор потомка с.