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

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

一个坏例子，但你会明白的：

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

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

来自此示例HTML:

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

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

---

不适用，因为它以错误的顺序选择元素。首先是所有的

type=text

，然后是

type=email

等等。

在CSS中，您无法基于一组属性获取容器中的第一个元素，您只能使用第n个类型的元素类型来实现这一点。但是，您可以设置一些类似于所需顺序的内容，然后使用加号选择器在JS中选择第一个可用结果：

CSS中没有像jQuery的

：first

那样的第一个匹配选择器，因此您无法使用纯CSS来完成此操作

正如评论中提到的，选择器本身没有顺序的概念。您有一个选择器，然后您有DOM中与该选择器匹配的所有元素。在以逗号分隔的选择器列表中，排序并不重要，CSS中最具体的选择器优先于级联解析（例如，对于

输入中匹配两个选择器的元素，输入[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中位于第一位。

你的问题对我来说毫无意义，因为不同元素被选择的“顺序”与CSS的视图没有任何区别。它是这样的。我只需要1个输入，第一个。当无法返回1时，可以返回整个集合。然后我可以使用JS来选择第一个。这才是顺序真正重要的时候。选择器首先是从JS调用的。@CBroe我要的是一个有目的的CSS选择器。其目的是替换/删除工作JS代码，该代码选择所有输入，返回并将其放入工作内存，首先选择，执行检查等。性能、错误风险、代码可维护性在这里很重要。如果您的问题是关于改进一些JS代码，然后你应该展示代码，而不是以一种不会暗示你试图解决的实际问题的方式提问。谢谢。我想这是不可能的，至少用CSS3是不可能的。我可以接受这个答案。顺便说一句，请删除您提供的CSS，以防止他人混淆。因为它完全是做别的事情。您的解决方案选择紧跟在

input[type=“text”]

元素之后的所有

input[type=“email”]

元素，仅当这些元素紧跟在

input[type=“date”]

元素之后时。我要求的是选择任何指定类型中的第一个，而不管它们在DOM中的顺序如何。谢谢你的努力！根据我在Mootools框架中的测试。性能友好的方法只选择第一个元素：

getElement（'input[type=text]、input[type=email]、input[type=number]）

将始终返回选择器中位于第一位的类型项，与DOM顺序无关。只有当我使用：

getElements（'input[type=text]，input[type=email]，input[type=number]'）一次检索所有元素时，

才是选择器列表中的顺序无关紧要的时候。@Alph-Dev:这太奇怪了，肯定不是标准的行为。您可以通过使用标准API而不是Mootools的

getElement（）

来选择您的元素，从而解决该行为。