在css中选择多个孩子

Question

我试图在css中为表格应用省略号类.所以有些列需要有这个省略号类.我在表中有多列.

我是通过nth-childcss中的属性来做这个,有没有其他方法来选择随机多个孩子？

我试过了-

.ListTaskTime tbody tr >td:nth-child(3) a
{
      text-overflow: ellipsis;
    width:150px;
    display: block;
    overflow: hidden;
    word-break:keep-all;
    zoom:normal;
    line-break:normal;
    white-space:pre;
}

虽然同一个表还有一个列5th-child,但现在对于这个孩子,我需要创建一个单独的类,因此对于其他列.

我不想扩展我的CSS代码.还有其他解决方案吗？

Answer 1

您可以使用逗号分隔类 ,

.ListTaskTime tbody tr >td:nth-child(3), 
.ListTaskTime tbody tr >td:nth-child(6),
.ListTaskTime tbody tr >td:nth-child(9) {
    /* Common Styles Goes Here, Styles will apply to child 3,6 and 9 */
}

注意:您需要nth-child在样式表中手动检查并定义它,因为如果列增加,CSS无法为您决定.

如果使用服务器端语言生成动态表,则可以使用substr()减少字母等功能.

旁注:>除非您没有任何子表,否则您不必使用,这就足够了..tbody tr td:nth-child(3)

Answer 2

如果我正确理解了问题，那么您正在寻找一种仅选择第 3 列和第 5 列的方法。这是一种方法：td:nth-child(-2n+5):not(:first-child)或td:nth-child(-2n+5):nth-child(n+3)

（我不确定是否使用“嵌套选择器”[我刚刚编造了这个术语并且不确定它是否真实] 即:not(:first-child)比使用功能符号更快，即:nth-child(n+3)与否[我的猜测是肯定的，因为后者似乎涉及额外的迭代；请参阅下面冗长的解释]）

参考（滚动到“示例”部分以查看所有可能性，并进一步向下滚动到“浏览器兼容性”部分，您猜对了，浏览器兼容性）

这是一个冗长的解释：

我不得不再次编辑这个解释，主要是因为“到最后”的整个概念（例如从第三个到最后一个孩子开始）是胡说八道。Functional Notation 没有考虑到孩子的总数，所以不能认为是从孩子组的末尾开始选择

@Turnerj 在他的回答中提到的方法以及 @bansal 正在寻找并解决原始问题的方法在参考文献中被描述为“函数表示法”。

An+B 表示对于 n 的每个正整数或零值，其在一系列同级中的数字位置与模式 An+B 匹配的元素。第一个元素的索引是 1。值 A 和 B 都必须是整数。

例如，如果你想要孩子 3 到最后一个孩子，你可以做:nth-child(n+3). (A=1; B=3)就像引用所说的那样，n 总是从 0 开始。例如，假设有 5 个孩子。这给你：

• 孩子 3(0+3)
• 孩子 4(1+3)
• 孩子 5(2+3)

3+3 将导致不存在的子 6。由于 n 从 0 开始并且不会变为负数，因此无法选择孩子 2 或 1。

您还可以通过执行:nth-child(-n+3).(A=-1; B=3)

• 子 3(-1*0 + 3)
• 子 2(-1*1 + 3)
• 子 1(-1*2 + 3)
• 没有孩子：0=(-1*3 + 3)

可以跳过以下部分以避免混淆。它已留在这里供之前阅读过未经修正的胡扯的任何人使用，因此他们可以“忘记”他们认为是真实的任何谎言

胡说八道“到最后”部分的开头[已更正]

如果您希望从第 3 个孩子到最后一个孩子的每个第 4 个孩子在 15 个孩子的组中倒退，:nth-child(4n-3). (A=4; B=-3) 实际上，倒退应该使 A=-4，而且，您不能“持续”，但在这种特殊情况下，它的工作原理与以前相同：

• 没有孩子：-3=(4*0 - 3)
• 孩子 1(4*1 - 3)
• 儿童 5(4*2 - 3)
• 儿童 9(4*3 - 3)
• 儿童 13(4*4 - 3)

即使你倒退，A[的系数n] 保持正数，因为它B是负数，可以认为是从 -3（倒数第三）开始。

这个“到最后”的东西只在T % A = A - 1，T孩子的总数在哪里时有效。这工作了，因此T个孩子，可以这么说，可被称为-1来讲A，如果是有道理的。在这个例子中， whereT是 15，A是 4,15 % 4 = 3 = 4 - 1，所以它有效。进一步解释：如果我们用 4 来计算“到最后”，可以这么说，

-3 -2 -1 0 |-3 -2 -1 0|-3 -2 -1 0 |-3 -2 -1“到最后”在 4

-15 -14 -13 -12|-11 -10 -9 -8|-7 -6 -5 -4 |-3 -2 -1“到最后”

1 2 3 4 | 5 6 7 8| 9 10 11 12| 13 14 15常规的

1 2 3 4 | 1 2 3 4| 1 2 3 4 | 1 2 3在 4

15最终被正确地称为-1或最后和14作为-2或倒数第二和13作为-3或倒数第三等。

但如果孩子总数T是 16岁，它会起作用吗？根据给定的公式T % A = A - 1[ 16 % 4 = 0 ? 4 - 1]，我们不应该期望它起作用。我们想16成为-1和15成为-2，但他们不是。对于好奇的人来说，“到最后”的思维只适用于T=15何时A=1,2,4,8（16( T+1) 的因数；因为T=16，因为T+1=17是素数，只A=1让“到最后”的思维有效

如果“到最后”的东西总是有效，我们希望:nth-child(4n-3) (A=4; B=-3)用T = 16而不是 15，这意味着从第 3 个到最后一个数字是 4 的倍数。我们希望倒数第三个数字 ,14出现在序列中，但实际情况如下：

• 没有孩子：-3=(4*0 - 3)
• 孩子 1(4*1 - 3)
• 儿童 5(4*2 - 3)
• 儿童 9(4*3 - 3)
• 儿童 13(4*4 - 3)

你有同样的孩子[孩子]:)。所以你看，同样的孩子，因为生产关系A和B。T的唯一作用是确定限制（序列可以包括第 17 个孩子，但T=16）。

好的回到原文谈论 T = 15

如果系数是负数，你会下降到负数并且永远不会得到正数（这是孩子们所在的地方）。换句话说，A<0; B<0不给孩子。

在同样的场景下，同样的结果也可以通过

• :nth-child(-4n+13)（从第 13 个孩子开始，每第 4 个孩子倒退）
• :nth-child(4n+1)（从第 1 个孩子开始，每第 4 个孩子）
• :nth-child(4n-15)（当B为负时，从第15个孩子到最后一个孩子的每个第4个孩子，你不能从第Bth个孩子开始到最后一个孩子，如上所述）

请注意，这:nth-child(4n+5)将排除孩子 1，因为n不能为负数。为了让所有的孩子序列（1,5,9,13在这个例子中）中，与B为正，该模式必须在序列（1日或13日在这个例子中）的一端开始。从 9 号或 5 号开始的任何模式都将排除其他数字。它不会像 modulo(%) 那样循环到开头。但是如果B是负数（分别为-7 或 -11 分别表示第 9 个和第 5 个，或者任何进一步的负数小于 4 的倍数，在本例中），无论您从哪里开始，您都将始终获得序列中的所有孩子，假设，如前所述，A[coefficient of n] 保持为正。

胡说八道“到最后”部分的结尾[已更正]

您可以执行:nth-child(odd)( :nth-child(2n+1)) 和:nth-child(even)( :nth-child(2n))，但我最感兴趣的是获取内部范围。这只是通过取两个的交集来完成:nth-child()的。

举个例子，如果你只想要第 3 和第 5 列，在一个 490 列的表中（与问题无关，我只是选择它，因为这是我们每天应该原谅每个人的次数）

• td:nth-child(-n+5)给你孩子 1-5 还是孩子？5
• td:nth-child(n+3)给你孩子 3-490 还是孩子？3
• td:nth-child(odd) 给你我想你明白了

所以总而言之：td:nth-child(-n+5):nth-child(n+3):nth-child(odd). （小于 5 AND 大于 3 AND 奇数的列[这取出子 #4]。）

我按这个顺序排列是为了最小化每个选择器为下一个选择器创建的结果数量。如果，您td:nth-child(n+3)首先放置，您将获得相同的最终结果，但是您会将 child 3-490 传递给下一个选择器，而不是仅传递 child 1-5。这可能不会显着提高性能，但可能在更大范围内有用。

我不确定关于顺序的最后一点是否真的适用于任何浏览器，或者浏览器是否已经对其进行了优化，但这只是我的思考过程。

写完这一切，我想到了td:nth-child(-n+5):nth-child(2n+3)。然后我又想到td:nth-child(-2n+5):nth-child(n+3)并编辑，但我已经解释了我最初的解决方案，所以我不会抹去它并重新解释这个，因为我认为最后一个解决方案从给出的所有其他例子中都有意义。我只想说，我认为最后一个是最好的，因为第一个 nth-child 选择器 ietd:nth-child(-2n+5)只传递 3 tds 给第二个选择器，而不是传递的 5 tds td:nth-child(-n+5)。

Answer 3

应该这样做：

.ListTaskTime tbody tr > td:nth-child(3) a,
.ListTaskTime tbody tr > td:nth-child(5) a
{
    text-overflow: ellipsis;
    width:150px;
    display: block;
    overflow: hidden;
    word-break:keep-all;
    zoom:normal;
    line-break:normal;
    white-space:pre;
}

在这样的选择器之间使用逗号，可以让您使用声明的相同样式的多个选择器。您可以使用任意多个以逗号分隔的选择器，以允许更多元素使用相同的样式。

我可能会补充说，除非页面上的样式冲突，否则使用.ListTaskTime tbody tr > td:nth-child(3) a非常具体，可以简化为.ListTaskTime td:nth-child(3) a。

您还可能有兴趣了解:nth-child(even)和:nth-child(odd)甚至更复杂的nth-child伪选择像:nth-child(2n+3)它可以帮助你，如果以后适合进行风格的模式有更多的列。