23

我正在尝试在 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 代码。还有其他解决方案吗？

4

5 回答 5

40

您可以用逗号分隔类,

.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)

于 2013-05-04T07:31:45.277 回答
11

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

（我不确定是否使用“嵌套选择器”[我只是编造了这个术语，不确定它是否真实] ie: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。

你也可以通过做来让孩子 3 开始: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话，可以将第 th 个孩子称为在这个例子中，哪里是 15 和4，所以它可以工作。进一步解释：如果我们用 4 来计算“持续”，可以这么说，-1ATA15 % 4 = 3 = 4 - 1

-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最终被正确地称为-1or last 和14as -2or 2nd to last 和13as -3or 3rd to last 等。

但如果孩子总数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 = 1615 代替 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个孩子，你不能从第一个到最后一个孩子的角度来考虑B，如上所述）

请注意，这:nth-child(4n+5)将排除孩子 1，因为n不能为负数。要获取序列中的所有子项（在本例中为 1、5、9、13），并且B为 POSITIVE，模式必须从序列的一端之一开始（在本例中为第 1 或第 13）。从第 9 或第 5 开始的任何模式都将排除其他数字。它不会像模（％）一样循环到开头。但是如果是负数（在这个例子中，第 9 个和第 5 个分别为B-7 或 -11或任何小于 4 的倍数的负数），无论你从哪里开始，你总是会得到序列中的所有孩子，假设，如前所述，[ 的系数] 保持为正。An

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

您可以使用: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 且大于 3 且奇数的列[这取出了孩子 #4]。）

我按此顺序排列以最小化每个选择器为下一个选择器创建的结果数量。如果，你td:nth-child(n+3)先放，你会得到相同的最终结果，但你会将孩子 3-490 传递给下一个选择器，而不是只传递孩子 1-5。这可能对性能有微不足道的提高，但可能在更大的范围内有用。

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

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

于 2019-06-20T19:39:35.017 回答
6

这应该这样做：

.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;
}

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

我可能会补充一点，除非您在页面上有冲突的样式，否则 using.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)，如果稍后有更多列适合要设置样式的模式，它们可能会对您有所帮助。

于 2013-05-04T07:31:31.837 回答
1

不太确定“通过选择类来应用类”是什么意思，但我看到你基本上想要一个 CSS 选择器字符串。

如果第 5 个子列（？）需要一个不同的类，你的意思是所有其他列，但表中的那个子列具有text-overflow: ellipsisin 它的属性，那么这将是一种简短的替代方式。

    .ListTaskTime td:not(:nth-of-type(5)) a{
        /*styles for ellipse goes here*/}
    .ListTaskTime td:nth-of-type(5) a{ 
        /*styles for not-ellipse goes here*/}

（奇怪的是，如果分类对象是 a <p>，那么该特定的选择器字符串虽然 a<div>不起作用..）

也可以使用它tr>:nth-child()来定位与 . 共享相同空间的所有对象<td>。所有其他挑剔的位（多个查询等）已被其他人整齐地概述。很抱歉，当您在表格中有两种不同的格式时，几乎不可能在纯 css 中的单个选择器中同时指定它们......现在？;)

于 2014-08-26T06:36:26.687 回答
-2 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1:nth-child(4n-3){
            color: red;
        }
    </style>
</head>
<body>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>

</body>
</html>
于 2020-09-18T15:17:02.967 回答