Как выбрать первого потомка определенного типа с помощью CSS-селектора в сложном HTML

Question

Мне нужно найти элемент <input> в очень длинном и сложном HTML-документе.Элемент <input> имеет элемент-предок <div> с атрибутом id.Вот пример фрагмента того, что я описываю:

<div id="root">
    <header>
        <h1>Hello World</h1>
    </header>
    <div>
        <div>
            <form>
                <input value="First Name">
                <input value="Last Name">
            </form>  
        </div>
    </div>
</div>

Я хочу найти элемент <input> со значением «Фамилия»

Я думаю, что 'сделать это, найдя корневой элемент <div> по его идентификатору, а затем найти его второго потомка типа <input>

Я представляю, что он может выглядеть так:

#root **some magic** {
    some styling
    }

Чтобы найти «Имя» <input>, я бы просто сделал:

#root input {
    some styling
    }

Это позволит просмотреть элемент <div id="root"> и найти первого потомка типа <input>.

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

Я понимаю, что для этого простого примера я мог бы просто указать полный селектор CSS или Xpath, но я имею дело с огромными HTML-документами смного вложенных элементов, которые мне нужно найти.

Я также буду рад использовать Xpath вместо CSS, если это возможно через это.

Answer 1

Если ваши входные данные такие же, как в вашем примере, вы можете использовать first-child:

#root input:first-child {
  border-color:red;
}

<div id="root">
    <header>
        <h1>Hello World</h1>
    </header>
    <div>
        <div>
            <form>
                <input value="First Name">
                <input value="Last Name">
            </form>  
        </div>
    </div>
</div>

Подробнее о:

• первый ребенок
• последний ребенок
• п-й ребенок

Если ваш HTML-код немного сложнее, но все входные данные по-прежнему совпадают, то вы можете попробовать first-of-type:

#root input:first-of-type {
  border-color:red;
}

<div id="root">
    <header>
        <h1>Hello World</h1>
    </header>
    <div>
        <div>
            <form>
                <div>some other elements</div>
                <input value="First Name">
                <div>some other elements</div>
                <input value="Last Name">
                <div>some other elements</div>
            </form>  
        </div>
    </div>
</div>

В противном случае, если ваши входные данные не являются братьями и сестрами, вам придется подойти к их ближайшему предку, которые являются братьями и сестрами, и поставить на него первого ребенка

Дополнительная информация о:

• первый тип
• последний из-типа
• п-о-типа

Другие полезные ссылки:

Некоторые полезные рецепты nth-child .

Answer 2

Не уверен, что это то, что вы хотите.Это выбирает первый входной дочерний внутренний # корень.

#root input:nth-of-type(1) { 
    background: red;
}

Или вы хотите выбрать вход, который имеет значение «Имя»?

#root input[value="First Name"] {
    background: red;
}

Answer 3

Чтобы выбрать вход со значением «Фамилия», используйте следующий селектор CSS.

#root input[value="Last Name"] {
    background: red;
}

где root - это идентификатор div, а input - тег со значением = "Фамилия"