Почему первый ребенок/последний ребенок не работает в blockquote

Это может быть глупый вопрос, но почему первый ребенок/последний ребенок не работает над блочными комментариями?Почему первый ребенок/последний ребенок не работает в blockquote

CSS

p { margin: 0 0 1.6em 0; } 
blockquote { margin: 0; padding: 0 25px 1em; background-color: #CCC; border-left: 5px solid #333; } 
blockquote:first-child { padding-top: 25px; color: red; } 
blockquote:last-child { padding-bottom: 25px; margin-bottom: 1em; color: yellow; }

HTML

<div> 
    <p>Integer bibendum erat ipsum, ac sodales nisi suscipit ut. Nullam eu felis quis nisl consectetur vehicula vel vitae justo. Praesent ullamcorper pretium posuere. Aliquam in suscipit nisi. Suspendisse potenti. In sed ligula vitae libero gravida molestie eu in nisl. Etiam ornare ultrices dolor, id consequat orci fringilla non. Nam ultrices mauris rutrum, fringilla ligula nec, aliquet turpis. Proin turpis velit, dictum vel vehicula vitae, scelerisque a sapien.</p> 
    <blockquote>Lorem ipsum dolor sit amet</blockquote> 
    <blockquote>Lorem ipsum dolor sit amet</blockquote> 
    <blockquote>Nunc scelerisque, risus id tempor viverra, ante nibh pulvinar neque, non volutpat ante tellus facilisis justo. Donec eget auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus lacus eget arcu suscipit vulputate. Sed at aliquet elit, in vestibulum metus. Nulla pharetra nibh quam, a ullamcorper nunc interdum sed. Etiam aliquam purus quis orci tincidunt malesuada. Etiam metus quam, gravida id molestie sit amet, suscipit eget leo.</blockquote> 
    <p>Integer bibendum erat ipsum, ac sodales nisi suscipit ut. Nullam eu felis quis nisl consectetur vehicula vel vitae justo. Praesent ullamcorper pretium posuere. Aliquam in suscipit nisi. Suspendisse potenti. In sed ligula vitae libero gravida molestie eu in nisl. Etiam ornare ultrices dolor, id consequat orci fringilla non. Nam ultrices mauris rutrum, fringilla ligula nec, aliquet turpis. Proin turpis velit, dictum vel vehicula vitae, scelerisque a sapien.</p> 
    <blockquote>Lorem ipsum dolor sit amet</blockquote> 
    <blockquote>Nunc scelerisque, risus id tempor viverra, ante nibh pulvinar neque, non volutpat ante tellus facilisis justo. Donec eget auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus lacus eget arcu suscipit vulputate. Sed at aliquet elit, in vestibulum metus. Nulla pharetra nibh quam, a ullamcorper nunc interdum sed. Etiam aliquam purus quis orci tincidunt malesuada. Etiam metus quam, gravida id molestie sit amet, suscipit eget leo.</blockquote> 
</div>

Update: То, что я хочу в этом примере:

BLOCKQUOTE 1: красный
BLOCKQUOTE 2: цвет по умолчанию
BLOCKQUOTE 3: желтый
BLOCKQUOTE 4: красный
BLOCKQUOTE 5: желтый

JS-Fiddle

источник

2014-01-28 klaasjansen

Вы ищете :first-of-type/:last-of-type. Как следует из названия псевдо-класса, это будет стилизовать первый/последний элемент типа.

UPDATED EXAMPLE HERE

blockquote:first-of-type { 
    padding-top: 25px; 
} 
blockquote:last-of-type { 
    padding-bottom: 25px; 
    margin-bottom: 1em; 
}

источник

2014-01-28 19:19:08

+1, я забыл об этом, это проще, чем использовать не ... –

@dystroy 1+ к твоему тоже;) ': not' отлично работает. –

Спасибо, я не знал: псевдо-класс первого типа. Но это не совсем то, что мне нужно (см. Обновленный вопрос). – klaasjansen

Потому что они не первый ребенок или последний ребенок, первым ребенком здесь является элемент p.

для нацеливания первого , вы можете сделать

:not(blockquote) + blockquote {

источник

2014-01-28 19:18:50

Есть ли способ, чтобы предназначаться первый и последний BLOCKQUOTE подряд в CSS? (я привязался к этому коду из-за моего редактора wysiwyg) – klaasjansen

Извините, я не понимаю. Можете ли вы привести мне пример? – klaasjansen

http://jsfiddle.net/G8Kvg/2/ Это не работает – klaasjansen

Почему первый ребенок/последний ребенок не работает в blockquote

ответ

Смежные вопросы