: селектор с первым ребенком не работает

Question

Я выбираю определенные divs с псевдо-селекторами first-child и: last-child, но: first-child не работает в любом браузере. Я проверил его. Я проверил caniuse .com и css-tricks.com, и консенсус в том, что: первый ребенок довольно широко поддерживается, поэтому я думаю, может быть, есть некоторые ошибки, о которых я не знаю. Я запускаю приложение на локальном сервере узла. Я подтвердил и мои css, и мой html. Кто-нибудь знает о любых ошибках, которые могут помешать: первый ребенок от работы?

HTML

<div class="col-md-6 blurbs"> 
<label>NEWS</label> 
<div> 
    <p>Lorem ipsum dolor spernatur aut odit aut fugit conse oluptate</p> 
</div> 
<div class="clearfix"> 
    <a class="pull-left">RSS</a> 
    <a class="pull-right">MORE NEWS</a> 
</div> 
</div> 

CSS

(не работает)

.news .blurbs div:first-child{ 
    outline: 1px solid red; 
    height: 260px; 
    overflow: auto; 
    margin-bottom: 10px; 
} 

(рабочий)

.news .blurbs div:last-child{ 
    outline: 1px solid red; 
    width: 95%; 
} 

Answer 1

В :first-child и :last-child псевдо-классах выберите элемент, который является первым/последним потомком родителя, фильтруется любым другим цепным селектором, поэтому div:first-child на самом деле не соответствует чему-либо, поскольку первый ребенок в пределах .blurbs не является div.

Что вам нужно использовать, чтобы получить эффект вы после это :first-of-type псевдо-класс, как это:

.news .blurbs div:first-of-type{ 
    outline: 1px solid red; 
    height: 260px; 
    overflow: auto; 
    margin-bottom: 10px; 
} 

here is a working example