1. дома
  2. Вопрос и ответ
  3. Выберите тег после nth-child

Выберите тег после nth-child

2016-06-02 2 views
-3

Как выбрать элемент после заданного :nth-child() с помощью CSS?Выберите тег после nth-child

div:nth-child(1) + p { font-size: 40pt; }

Не работает для меня, я смущен.

https://jsfiddle.net/3mfygmjj/1/

источник

2016-06-02 satinez

+0

'+ p' == рядом,'> p' == непосредственный потомок –

+0

Это действительно зависит от структуры вашего HTML. Вы пробовали 'div: nth-child (3) p'? –

+3

Можете ли вы разместить свою разметку? – Chris

ответ

3 
div:nth-child(3) > p { font-size: 40pt; }

будет выбирать каждый р тег, который находится в DIV: п-го ребенка (3) в качестве прямого потомка.

div:nth-child(3) p { font-size: 40pt; }

будет выбирать каждый р тег, который находится в DIV: п-го ребенок (3), даже если вложенный несколько уровней глубоко в DOM. В этом случае пространство между div: nth-child (3) и p является важным символом.

div:nth-child(3) + p { font-size: 40pt; }

будет выбрать один р тег, который является самым первым элементом после DIV: п-го ребенка (3) на том же уровне (не йот внутри других элементов).

div:nth-child(3) ~ p { font-size: 40pt; }

подберет каждый р тег, который после DIV: п-го ребенка (3) на том же уровне йот.

источник

2016-06-02 14:08:50 JakeParis

+1

Ok @Michael_B, я сделал. – JakeParis

0

Если вы хотите выбрать тот, который был после nth-child(3), почему бы не выбрать nth-child(4)? попробуйте nth-child(3) + div для ребенка непосредственно после. попробовать nht-child(3) ~ div для каждого ребенка после

Подробнее о сокрушительной журнала: https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/#2-child-selector

источник

2016-06-02 14:10:19

+0

Я пробовал это, но и не знаю, что я делаю неправильно. https://jsfiddle.net/3mfygmjj/1/ – satinez

+0

Вы использовали селектор смежных селекторов (+), но вы хотите зайти внутрь: https://jsfiddle.net/gp44zspr/ –

+0

Да, thx. Но мне нужен только первый прямой, поэтому + не работает. Мне нужно зайти внутрь и выбрать первого или n-го ребенка, thx div: nth-child (1)> p: first-child {font-size: 40pt; } – satinez

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

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