Html 在css中选择多个孩子

select multiple child in css

提问by Manoz

I am trying to apply ellipsis class in css for a table. So there are some columns need to have this ellipsis class. I have multiple columns in a table.

我正在尝试在表格的 css 中应用省略号类。所以有一些列需要有这个省略号类。我在一个表中有多个列。

I am doing this by nth-childproperty in css, Is there any some another way to select random multiple child?

我正在通过nth-childcss 中的属性执行此操作，是否有其他方法可以选择随机多个子项？

I tried-

我试过-

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

Though same table has one more column 5th-child, now for this child i need to make a separate class, hence for other columns.

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

I don't want to expand my css code. Is there any other solution?

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

回答by Mr. Alien

You can separate the classes with a comma ,

您可以用逗号分隔类 ,

.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 */
}

Note: You need to check the nth-childand define it manually in your stylesheet, as CSS cannot decide it for you if columns increase.

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

If you are using a server side language for generating a dynamic table, you can use functions like substr()to cut down the letters.

如果您使用服务器端语言来生成动态表，您可以使用诸如substr()减少字母之类的功能。

Side note : You don't have to use >unless and until you don't have any child table, this is sufficient.. tbody tr td:nth-child(3)

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

回答by Turnerj

This should do it:

这应该这样做：

.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 a comma between a selector like this allows you to have multiple selectors using the same styling declared. You can have as many comma-separated selectors as you want to allow more elements to use the same styling.

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

I might add that unless you have conflicting styling on the page, using .ListTaskTime tbody tr > td:nth-child(3) ais pretty specific and could be simplified to something like .ListTaskTime td:nth-child(3) a.

我可能会补充一点，除非您在页面上有冲突的样式，否则 using.ListTaskTime tbody tr > td:nth-child(3) a是非常具体的，可以简化为类似.ListTaskTime td:nth-child(3) a.

You may also be interested to know about :nth-child(even)and :nth-child(odd)or even more complex nth-childpseudo selectors like :nth-child(2n+3)which may help you if there is more columns later on that fit a pattern to be styled.

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

回答by Levi Uzodike

If I understand the problem correctly, you're looking for a way to select just the 3rd and 5th column. Here is a way: td:nth-child(-2n+5):not(:first-child)or td:nth-child(-2n+5):nth-child(n+3)

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

(I'm not sure whether using 'nested selectors'[I just made this term up and am unsure if it is real] i.e. :not(:first-child)is faster than using Functional Notation i.e. :nth-child(n+3)or not[my guess is yes, since the latter seems to involve extra iteration; see below in the long-winded explanation])

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

Reference(scroll to "Examples" section to see all possibilities and further down to the "Browser compatibility" section for, you guessed it, browser compatibility)

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

Here's a long-winded explanation:

这是一个冗长的解释：

The method that @Turnerj touched on in his answer and that @bansal was looking for and that solves the original question is described in the reference as "Functional Notation".

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

An+B Represents elements whose numeric position in a series of siblings matches the pattern An+B, for every positive integer or zero value of n. The index of the first element is 1. The values A and B must both be integers.

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

For example, if you want child 3 through the last child you could do :nth-child(n+3). (A=1; B=3)Like the quote says, n always starts from 0. Let's say there are 5 children for example. This gives you:

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

• child 3(0+3)
• child 4(1+3)
• child 5(2+3)

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

3+3 will result in child 6 which doesn't exist. And since n starts at 0 and doesn't go negative, there's no way to select child 2 or 1.

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

You can also get child 3 to the beginning by doing :nth-child(-n+3). (A=-1; B=3)

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

• child 3(-1*0 + 3)
• child 2(-1*1 + 3)
• child 1(-1*2 + 3)
• no child: 0=(-1*3 + 3)

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

If you want every 4th child starting from the 3rd to last child going backwards in a group of 15 children, :nth-child(4n-3). (A=4; B=-3)Following the same logic as before:

如果您希望从第 3 个孩子到最后一个孩子的每 4 个孩子在 15 个孩子的组中倒退，:nth-child(4n-3). (A=4; B=-3)遵循与之前相同的逻辑：

• no child: -3=(4*0 - 3)
• child 1(4*1 - 3)
• child 5(4*2 - 3)
• child 9(4*3 - 3)
• child 13(4*4 - 3)

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

Even though you're going backwards, A[the coefficient of n] stays positive because Bis negative, which can be thought of as starting at -3(3rd to last). If the coefficient was negative, you'd descend into the negatives and never get a positive number(which is where the children are). In the same scenario, the same result could also be achieved by

即使你倒退，A[的系数n] 保持正数，因为它B是负数，可以认为是从 -3（倒数第三）开始。如果系数是负数，你会下降到负数并且永远不会得到正数（这是孩子们所在的地方）。在同样的场景下，同样的结果也可以通过

• :nth-child(-4n+13)(every 4th child going backwards starting from the 13th child)
• :nth-child(4n+1)(every 4th child starting at the 1st child)
• :nth-child(4n-15)(every 4th child starting from the 15th to last child)

• :nth-child(-4n+13)（从第 13 个孩子开始，每第 4 个孩子倒退）
• :nth-child(4n+1)（从第 1 个孩子开始，每第 4 个孩子）
• :nth-child(4n-15)（从第 15 个孩子到最后一个孩子，每 4 个孩子）

Notice that :nth-child(4n+5)will exclude child 1 because ncannot be negative. To get all the children in the sequence(1,5,9,13 in this example),
the rest of this paragraph has been edited
with Bbeing POSITIVE, the pattern must start at one of the ends of the sequence(1st or 13th in this example). Any pattern starting at the 9th or 5th will exclude other numbers. It will NOT loop to the beginning like modulo(%). But if Bis negative(-7 or -11 for 9th and 5th, respectively, in this example), you will always get all the children in the sequence regardless of where you start, assuming, as mentioned before, that A[coefficient of n] is kept positive.

请注意，这:nth-child(4n+5)将排除孩子 1，因为n不能为负数。要获得序列（1,5,9,13在这个例子中）在所有的孩子，
这个段落的其余部分已被编辑
用B为正，该模式必须在开始（该序列的末端的一个第一或第13位这个例子）。从 9 号或 5 号开始的任何模式都将排除其他数字。它不会像 modulo(%) 那样循环到开头。但是如果B是负数（在这个例子中，第 9 个和第 5 个分别为 -7 或 -11），无论你从哪里开始，你总会得到序列中的所有孩子，假设，如前所述，A[coefficient of n] 是保持积极。

You can do :nth-child(odd)(:nth-child(2n+1)) and :nth-child(even)(:nth-child(2n)), but the one I was most interested in was getting the internal ranges. This is just done by taking the intersect of two :nth-child()'s.

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

For example, if you want just the 3rd and 5th column, in a table with 490 columns (it doesn't matter to the problem, I just chose it because it's how many times we should forgive each person per day)

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

• td:nth-child(-n+5)gives you child 1-5 or child < 5
• td:nth-child(n+3)gives you child 3-490 or child > 3
• td:nth-child(odd)gives you I think you get it

• td:nth-child(-n+5)给你孩子 1-5 或孩子 < 5
• td:nth-child(n+3)给您孩子 3-490 或孩子 > 3
• td:nth-child(odd)给你我想你明白了

So all together that's: td:nth-child(-n+5):nth-child(n+3):nth-child(odd). (The columns that are less than 5 AND greater than 3 AND odd[this takes out child #4].)

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

I put it in this order to minimize how many results each selector would create for the next one. If, you put td:nth-child(n+3)first, you'd get the same final results, but you'd pass child 3-490 to the next selector instead of just passing child 1-5. This probably makes an insignificant increase in performance, but maybe could be useful at larger scales.

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

I'm not sure if this last bit about order is actually how it works for any browser at all, or if browsers already optimize that, but that was just my thought process.

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

At the end of writing all this, I thought of td:nth-child(-n+5):nth-child(2n+3). Then I thought of td:nth-child(-2n+5):nth-child(n+3)and edited again, but I'd already explained the solution I had originally, so I won't erase that and re-explain this one because I think this last solution makes sense from all the other examples given. I'll just say that I think the last one is best since the 1st nth-child selector i.e. td:nth-child(-2n+5)passes only 3 tds to the 2nd selector instead of the 5 tds that td:nth-child(-n+5)would pass on.

写完这一切，我想到了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)。

回答by nalin

not quite sure what you mean by "applying class by selecting class" but i see you'd like a css selector string basically.

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

if, by that 5th-child column(?) needing a different class you mean all others but that child in the table has the property of text-overflow: ellipsisin it, then this would be a short alternative way.

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

    .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*/}

(weird thing, if the classed object is a <p>, that particular selector string doesn't work though as a <div>it does..)

（奇怪的是，如果分类对象是 a <p>，那个特定的选择器字符串不会像 a<div>那样工作......）

One could also use tr>:nth-child()to also target all objects sharing the same space as <td>. all other finicky bits (multiple queries etc) have been outlined neatly by others. Sorry to say that when you have two different formats in a table, it's pretty much impossible to specify them both in a single selector in plain css..for now? ;)

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