Терминология CSS: нацеливание на сложные комбинации тегов - PullRequest
1 голос
/ 01 августа 2011

Я пытаюсь выяснить, как называть теги в CSS, чтобы создавать красивые абзацы.

На данный момент мой код выглядит так:

p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: left;
}
p + p {
text-indent: 2.5em;
}
li p, blockquote p {
    margin: .5em 0;
}

И мой HTML:

<p><strong>A little title</strong></p>
<p>Content text which can be single line or big block aswell.</p>

Ссылаясь на код выше, я хочу позвонить на

     <p><strong>g</strong></p>

содержимое, чтобы оно не наследовало от p, как было введено ранее.

Я пытался:

p strong, которые вызывают каждый strong, расположенный в p, но только внутри него. Я имею в виду: только на strong, после установки контейнера p. Может быть, может работать с отрицательным полем, но немного грязно ...

p:not(p strong), что звучит как решение, но не подходит к этому случаю, поскольку strong все еще наследует от стиля p.

Есть ли способ сделать это с помощью CSS?

--- РЕДАКТИРОВАТЬ ---

Пока я использовал p >strong:only-child, который вызывает теги strong, расположенные в тегах p. Чтобы обеспечить хороший визуальный рендеринг, я применил отрицательное левое поле размера отступа ... как временное решение.

Ответы [ 2 ]

1 голос
/ 01 августа 2011

Насколько я понимаю, вы хотите что-то вроде "содержит":

p:contains(b) { line-height: 2em; }

но в CSS такого селектора нет в принципе. Если вы хотите узнать почему, тогда читайте мою статью " CSS, селекторы и сложность вычислений "

Варианты для вас:

a) Либо использовать классы типа p.header, p.normal или

b) определить стиль для <b>, а не для <p>:

p > b:first-child:last-child {
  font-size: 2em;
}

Дайте мне знать, если вам понадобятся комментарии к селектору p > b:first-child:last-child.

1 голос
/ 01 августа 2011

Вы можете попробовать p:not(). Дальнейшая документация здесь: http://reference.sitepoint.com/css/pseudoclass-not

Обновление: К сожалению, часть strong продолжает наследовать стиль тега p. Лучше всего было бы очистить его в селекторе, таком как p strong, а затем применить остальные стили, которые вам нужны.

Обновление 2: Оказывается, вы в состоянии использовать псевдо-селектор :not. Пример здесь: http://jsfiddle.net/Mf5uc/1/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...