-2

我需要<input>在一个非常长且复杂的 html 文档中找到一个元素。该元素有一个带有 id 属性<input>的祖先元素。<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>值为“姓氏”的元素

我想我会<div>通过它的 id 找到根元素，然后找到它的第二个类型的后代<input>

我想象它可能看起来像这样：

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

要找到“名字” <input>，我只需这样做：

#root input {
    some styling
    }

这将查看<div id="root">元素并找到 type 的第一个后代<input>。

如何使用与此类似的方法找到第二个？

我意识到，对于这个简单的示例，我可以简单地指定完整的 CSS 选择器或 Xpath，但我正在处理包含大量嵌套元素的巨大 html 文档，我需要找到它们。

如果可能的话，我也很乐意使用 Xpath 而不是 CSS。

4

3 回答 3

2

如果您的输入与您的示例中的一样，您可以使用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 食谱。

于 2019-03-11T14:20:28.790 回答
1

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

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

还是您要选择具有“名字”值的输入？

#root input[value="First Name"] {
    background: red;
}
于 2019-03-11T14:13:18.637 回答
0

要选择值为“姓氏”的输入，请使用下面的 CSS 选择器。

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

其中 root 是 div 的 id，输入是 value = "Last Name" 的标签

于 2019-03-11T14:53:24.907 回答