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>

有关以下信息的更多信息：

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

否则，如果您输入的内容不是兄弟姐妹，则必须上升到与兄弟姐妹最接近的祖先，然后将第一个孩子放在该兄弟姐妹上

有关以下信息的更多信息：

其他有用的链接：

Some helpful nth-child recipes。

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，输入是值为=“ Last Name”的标签

如何在复杂的HTML

3 个答案: