在CSS中选择多个孩子

我想在表中应用省略号类的CSS。所以有一些列需要有这个省略号类。我在一个表中有多个列。在CSS中选择多个孩子

我这样做是通过nth-child财产在CSS中，有没有任何一些其他方式来选择随机多个孩子？

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

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

我不想展开我的css代码。有没有其他解决方案？

来源

2013-05-04 Manoj

仅供参考，你可以/应该缩短你的选择，以'.ListTaskTime TD：第n个孩子（N）'（当然，它们的列表由逗号分隔，由第2个回答说），除非你已经特异性问题 – FelipeAls 2013-05-04 07:35:08

@FelipeAls比我会建议他使用'在这种情况下，第n-的-type' – 2013-05-04 07:36:00

@ Mr.Alien我们不知道的行结构（有没有'th'上第一列或不呢？），但这在列表和表格中非常易于管理。在p，hN，（section，div，article），重复类的列表等内容中，受到'：nth-of-type'带来的差异的欢迎。 – FelipeAls 2013-05-04 07:38:59

您可以用逗号分隔的类,

.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-04 07:31:45

这应做到：

.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)它可以帮助你，如果以后适合进行风格的模式有更多的列。

来源

2013-05-04 07:31:31 Turnerj

不太清楚你的意思是“应用类选择类“但我看到你基本上想要一个CSS选择器字符串。

如果通过需要不同类别的第五个子列（？）表示其他所有其他类别，但表格中的该子项具有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*/}

（奇怪的事情，如果归类对象为<p>，该特定选择的字符串不工作，但作为一个<div>它..）

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

来源

2014-08-26 06:36:26 nalin

在CSS中选择多个孩子

回答

相关问题