在CSS中选择多个子级 [英] select multiple child in css

问题描述

我正在尝试在CSS中为表应用省略号类. 因此，有一些列需要具有此省略号类.我在一个表中有多个列.

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中的nth-child属性执行此操作，是否还有其他方法可以选择随机多个子级?

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

我尝试过-

.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，但是现在我需要为这个孩子创建一个单独的类，因此需要创建其他列.

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

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

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

推荐答案

您可以使用逗号,

.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则无法为您决定.

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

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

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

侧面说明:除非并且直到没有任何子表，否则不必使用>..tbody tr td:nth-child(3)

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)

这篇关于在CSS中选择多个子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！