CSS 选择器结合 And 操作 '&&'

Question

我正在尝试使用 querySelectorAll() 获取具有对齐属性的每个 'td' 元素 && 是 'tr'

的子元素

这有效：

document.querySelectorAll('tr>td');

这有效：

document.querySelectorAll('[align]');

但是如何组合它们呢？

Answer 1

像这样组合它们：

document.querySelectorAll('tr>td[align]');

更多信息：CSS Attribute Selectors

注意：无论如何，<td> 只能作为 <tr> 的子代。

Answer 2

您可以使用与 CSS 相同的方式组合选择器，例如：

document.querySelectorAll('tr>td[align]');

如果您没有嵌套表格，那就是 document.querySelectorAll('td[align]');。

Answer 3

前言：td前面的tr>毫无意义：The only valid parent element for a td is a tr。所以我把它留在下面了。

这取决于你想做什么。

如果您只想要 td 个具有 align 属性的元素：
```
document.querySelectorAll("td[align]")
```
或者只有 td 个元素是 children 个 tr 个具有 align 属性的元素
```
document.querySelectorAll("tr[align]>td")
```
或者仅具有 align 属性的元素是 children 个 td 元素：
```
document.querySelectorAll("td[align]")
```
或者只有具有 align 属性的元素是后裔（不一定是直接 children）td 元素：
```
document.querySelectorAll("td [align]")
```

...等等； full details in the spec.

在下方回复您的评论：

It works, but is there a way to not select the first td from each tr ?

你的问题与此无关。

你可以使用td:not(:nth-child(0))这意味着"a td that is not the first child of its parent"前提是你从来没有script 元素作为 tr 的第一个 child （这是有效的，但做起来很奇怪）。有了这个条件，它就起作用了，因为只有 td 和 script 对 tr.

有效 children

或者你可以直接下注 select 所有相关的 td 然后：

var list = Array.prototype.slice.call(document.querySelector("whatever"), 1);

...这将为您提供一个数组，跳过 querySelectorAll.

返回的列表中的第一个条目

回复您的进一步评论：

tr[style]>td[align]:not(:nth-child(0)) returned 550 node lists which is the same as tr[style]>td[align]

没错。同样，:nth-child 查看 child 是什么， 而不是 它落在前一个 selector.[=48 选择的列表中的位置=]

如果您想跳过每个行中的第一个 td，并且您想要忽略没有 [=43] 的 tr =]属性，比较复杂：

var result = Array.prototype.reduce.call(
    document.querySelectorAll("tr[style]"),
    function(list, row) {
        list.push.call(
            list,
            Array.prototype.slice.call(row.querySelectorAll("tr[align]"), 1)
        );
        return list;
    },
    []
);

CSS 选择器结合 And 操作 '&&'

CSS selector combine with And operation '&&'

html

javascript

css-selectors