如何在复杂HTML中使用CSS选择器选择特定类型的第一个后代

Question

我需要在非常复杂的HTML文档中找到<input>元素。<input>元素具有带有ID属性的祖先<div>元素。这是我所描述的示例片段：

<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>元素

我认为我会通过ID找到根<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>

更多有关：

的信息

• 第一子女
• 最后一个孩子
• nth-child

如果您的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>

否则，如果您的输入不是兄弟姐妹，您将不得不去他们最亲密的祖先，并将第一个孩子放在那个

上

更多有关：

的信息

• 首先
• 末期
• type

其他有用的链接：

一些有用的nth-Child食谱。

Answer 2

不确定这是否是您想要的。这选择了第一个输入子女内#root。

#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的ID，输入是带值="姓氏"