Question

我需要一个CSS选择器，它通过相同属性的一组特定值返回第一个元素（或者按正确的顺序排列所有元素）。

一个不好的例子，但你会明白这个想法：

input[type=text][type=email][type=number]:first

从此示例HTML：

<input type="date" />
<input type="email" />
<input type="text" />
<input type="password" />

选择器必须选择 <input type="email" /> 或

<input type="email" />
<input type="text" />
<input type="password" />

可以归还所有这些。但它们必须按原始顺序排列。例如：

input[type=text], input[type=email], input[type=number]

不合适，因为它以错误的顺序选择元素。首先是type=text，然后是type=email等。

Answer 1

在CSS中，您无法基于一组属性获取容器内的第一个元素，您只能使用nth-of-type对元素类型执行此操作。但是，您可以设置类似于所需订单的内容，然后使用加号选择器在JS中选择第一个可用结果：http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors

Answer 2

CSS中没有第一个匹配选择器，比如jQuery＆＃39; :first，所以你不能使用纯CSS来做到这一点。

正如评论中所提到的，选择者自己没有秩序的概念。你有一个选择器，然后你拥有DOM中与该选择器匹配的所有元素。在以逗号分隔的选择器列表中，排序无关紧要，除了在CSS中，这些选择器中最具体的选择器优先用于级联解析（例如，对于与input, input[type=email]中的两个选择器匹配的元素，后者被认为是风格解析。）

然而，使用JavaScript，您可以使用document.querySelector()来挑选第一个匹配项，因为它确实有一个顺序概念：

document.querySelector('input[type=text], input[type=email], input[type=number]')

再次注意，排序在选择器列表中无关紧要;在这种情况下，它取决于DOM中元素的顺序。在您的示例中，假设这些元素是整个DOM中唯一的input元素，或者您具有匹配元素的适当范围，document.querySelector()将始终与input[type=email]匹配，即使它在选择器列表中input[type=text]之后指定，只是因为它首先出现在DOM中。

通过同一属性的一组特定值选择第一个元素

2 个答案: