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

【问题标题】：How to select first descendant of specific type with CSS Selector in complex html如何在复杂的html中使用CSS选择器选择特定类型的第一个后代
【发布时间】：2019-03-12 03:18:53
【问题描述】：

我需要在一个非常长且复杂的 html 文档中找到一个 <input> 元素。 <input> 元素有一个带有 id 属性的祖先 <div> 元素。这是我所描述的示例 sn-p：

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

我想找到值为“Last Name”的<input> 元素

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

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

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

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

#root input {
    some styling
    }

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

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

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

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

【问题讨论】：

那是您实际的 html 布局吗？还是在其他容器中输入？如果是前者，你可以试试#root input:first-child
实际布局来自 .jsx，因为应用程序是在 React 库中开发的。我把它作为一个例子包括在内sn-p
您在其中添加了 [selenium] 和 [automated-tests] 标签，但我没有看到任何使用它们的参考。

标签： html css css-selectors

【解决方案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.

【讨论】：

我可以说#root input:second-of-type吗？
#root input:nth-of-type(2)
如果你想要除第一个或最后一个以外的任何东西，它会是nth - 例如nth-of-type(2) 或nth-child(2)
那么当使用nth-of-type时，元素根本不必是兄弟元素？
正确阅读我的答案 - 它为您提供了这种情况，并使用您的实际 html 结构创建了一个正确的minimal reproducible example，这样我们就不会在五十个关于您未显示的问题上浪费时间

【解决方案2】：

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

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

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

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

【讨论】：

我想选择值为“First Name”的输入，但最好不要使用[value="First Name"] 方法，因为并非我需要定位的所有元素都有一些值
好的，那么我的第一个选择器和@Pete 选择器应该可以完成这项工作。

【解决方案3】：

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

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

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

【讨论】：