Совпадение элемента первого элемента CSS, а не соответствие дочернего элемента

Как сопоставить первый тип элемента родительского элемента без соответствия этому дочернему элементу, если он не является первым дочерним?Совпадение элемента первого элемента CSS, а не соответствие дочернего элемента

мне нужен селектор CSS, соответствующий первый дочерний элемент, если он является header элементом body родительского элемента:

<body><header>

Но я не могу иметь селектор соответствует header элемент, если он не является первый дитя body элемента:

<body><div></div><header>

источник

2015-08-31 John

'body + header', то? –

@MarcB Нет, это если они рядом друг с другом. – John

Может быть, комбинация с ': nth-of-type (1)' ...? – John

Вы просто ищете :first-child.

body > header:first-child { 
 
    color: yellowgreen; 
 
}

<body> 
 
    <header>Should match</header> 
 
</body> 
 

 
<body> 
 
    <div></div> 
 
    <header>Shouldn't match</header> 
 
</body>

источник

2015-08-31 22:00:10 Nit

Работал после ваших изменений и нет, это была комбинация, в которой я нуждался. Спасибо. – John

Я не изменял селектор CSS, я просто добавил примеры. – Nit

Как выясняется осложнения с localhost SSL, 129 перенаправление на 127, PHP не говорит по правильному пути, yaddah yaddah yaddah он изначально работал. Еще раз спасибо. :-) – John

Кроме этого, Вы можете также использовать nth-child(1). Ниже фрагмент кода будет работать, так как заголовок является первым ребенком родительского тела

body > header:first-child { 
 
    background: tomato; 
 
}

<body> 
 
    <header>Header 1</header> 
 
</body>

Это не будет работать, как DIV является первым ребенком родительского элемента:

body > header:first-child { 
 
    background: tomato; 
 
}

<body> 
 
    <div></div> 
 
    <header>Header 1</header> 
 
</body>

источник

2015-08-31 22:00:30

nth-of-type (1) будет соответствовать заголовку во втором примере. Это как раз разница между ребенком и типом. – BoltClock

Хе-хе, Ницца найти. Благодаря! :) Отредактировано. –

-2

body header:first-of-type:not(nth-child(n+2)) { background: black; }

источник

2015-08-31 22:03:35 zer00ne

Это соответствует * любому * поколению 'header'' body'. – John

Мне нравится, творческий, хотя немного более многословный, чем выбранный вами комбинационный селектор, спасибо. – John

Меньше больше;) – zer00ne

Совпадение элемента первого элемента CSS, а не соответствие дочернего элемента

ответ

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