wybierz wiele dzieci w css

Question

Próbuję zastosować klasę ellipsis w css dla tabeli. A więc niektóre kolumny muszą mieć tę klasę elipsy. Mam wiele kolumn w tabeli.

Robię to przez nth-child Właściwość w css, Czy istnieje jakiś inny sposób, aby wybrać losowe wiele dzieci?

I wypróbowaną

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

Choć sama tabela ma jeszcze jedną kolumnę 5th-child, teraz dla tego dziecka muszę zrobić osobną klasę, a tym samym dla innych kolumn.

Nie chcę rozszerzać mojego kodu css. Czy istnieje inne rozwiązanie?

Answer 1

można oddzielić klasy przecinkami ,

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

Uwaga: Należy sprawdzić nth-child i zdefiniować go ręcznie w arkuszu stylów, jak CSS nie może zdecydować, to dla ciebie, jeśli kolumny wzrośnie.

Jeśli używasz języka po stronie serwera do generowania tabeli dynamicznej, możesz użyć funkcji takich jak substr() do wycinania liter.

dygresja: Nie trzeba używać > dopóki nie masz żadnej tabeli podrzędnej, to wystarczy .. tbody tr td:nth-child(3)

Answer 2

ten powinien zrobić:

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

Korzystanie przecinek między selektora tak pozwala mieć wiele selektorów przy użyciu tej samej stylizacji zgłoszone. Możesz mieć tyle selektorów rozdzielonych przecinkami, ile chcesz, aby więcej elementów mogło używać tej samej stylizacji.

dodam, że jeśli nie masz konflikt stylizacji na stronie, używając .ListTaskTime tbody tr > td:nth-child(3) a jest dość specyficzny i może być uproszczone do czegoś podobnego .ListTaskTime td:nth-child(3) a.

Możesz być także zainteresowany, aby wiedzieć o :nth-child(even) i :nth-child(odd) lub nawet bardziej skomplikowane nth-child pseudo selektorów jak :nth-child(2n+3) które mogą ci pomóc, jeśli nie ma więcej kolumn, które później dopasować wzór do stylu.

Answer 3

nie pewien co masz na myśli przez „Stosowanie klasy wybierając klasę "ale widzę, że chciałbyś mieć ciąg selektora css.

jeśli dla tej piątej kolumny dziecka (?) Wymagającej innej klasy masz na myśli wszystkie inne, ale to dziecko w tabeli ma w sobie wartość text-overflow: ellipsis, to byłby to krótki alternatywny sposób.

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

(dziwne, jeśli obiekt jest klasyfikowany <p>, że szczególną ciąg selektora nie działa jednak jako <div> to robi ..)

One mogą również korzystać tr>:nth-child() również kierować wszystkie obiekty udostępnianie tej samej przestrzeni co <td>. wszystkie inne drobiazgi (wiele zapytań itp.) zostały starannie przedstawione przez innych.Przykro mi to mówić, że gdy masz dwa różne formaty w tabeli, jest prawie niemożliwe, aby je określić w jednym selektorze w zwykłym css ... na teraz? ;)