在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中選擇多個孩子

回答

相關問題