Question

我有一个CSS选择器：span[data-update="status"]

此选择器在页面中检索0到N个范围。

我想修改此选择器，以便它在DOM中选择更高的跨度。

所有这些范围都属于属于单个表的TR，我想选择表中最高或DOM中最早的范围。

Answer 1

CSS无法做到这一点。但是，您选择的语言将返回一个数组，您可以使用该数组为第一个元素建立索引。

let element = document.querySelector("span[data-update=\"status\"]"); 

// or fetch the entire nodelist, and manually select the first element

let selection = document.querySelectorAll("span[data-update=\"status\"]");
let firstElement = selection[0];

JavaScript：https://developer.mozilla.org/en-US/docs/Web/API/NodeList
Java：https://docs.oracle.com/javase/8/docs/api/org/w3c/dom/NodeList.html

Answer 2

我想选择表中最高或最早的跨度在DOM中

JavaScript

为此，您可以使用querySelector，它只返回第一个匹配项，而不是querySelectorAll，后者返回的值比需要的多得多，并且由于您不想要而性能较低所有情况。

当您声明这些 spans 位于表行中时，在您的初始选择器中添加table tr会缩小搜索范围，因此它只会显示在{ {1}}及其table代表tr。

span[data-update="status"]

仅CSS

CSS可以针对特定情况解决此问题，例如如果您的标记是相对静态的，并保证第一个var first_match = document.querySelector('table tr span[data-update="status"]');始终位于第一个span[data-update="status"]中。在这种情况下，您可以使用CSS规则来设置其样式。

在更常见的情况下，例如如果您不知道您的tr第一次出现在哪个tr之下，或者您不确定表内容的确切嵌套或不同级别的嵌套。动态生成的内容经常是这种情况。

span[data-update="status"]

table:first-of-type tr:first-child span[data-update="status"]:first-of-type {
  color: red;
}


/*  for styling of this demo only  */
body > div ~ div { margin-top: 20px; }
table td { border: 1px dotted gray; }

Answer 3

Element.querySelector('CSSselector')

...正是这样做的。注意Element必须是DOM元素或document本身。

如果使用jQuery，请使用$(parentToSearch)[0].querySelector('CSSselector')或$('CSSselector', parentToSearch).first()

如果目标跨度与持有它们的后续同胞（<tr>）之间的关系相同，则可以通过纯CSS解决方案来实现，方法是使用tr selector样式化所有样式，然后取反除了tr ~ tr selector以外的所有样式。繁琐且适用性有限，但可能。

CSS选择器-DOM中的第一个匹配项

3 个答案: