chọn nhiều trẻ em trong css

Question

Tôi đang cố gắng áp dụng lớp dấu ba chấm trong css cho một bảng. Vì vậy, có một số cột cần phải có lớp dấu ba chấm này. Tôi có nhiều cột trong một bảng.

Tôi đang làm điều này bằng cách nth-child thuộc tính trong css, Có cách nào khác để chọn ngẫu nhiên nhiều con không?

tô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; 
} 

Mặc dù cùng một bảng có thêm một cột 5th-child, bây giờ cho con này tôi cần phải thực hiện một lớp riêng biệt, vì thế đối với các cột khác.

Tôi không muốn mở rộng mã css của mình. Có giải pháp nào khác không?

Answer 1

Bạn có thể tách các lớp học với một dấu phẩy ,

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

Lưu ý: Bạn cần phải kiểm tra các nth-child và xác định nó bằng tay trong stylesheet của bạn, như CSS không thể quyết định điều đó cho bạn nếu cột tăng.

Nếu bạn đang sử dụng ngôn ngữ phía máy chủ để tạo bảng động, bạn có thể sử dụng các chức năng như substr() để cắt giảm các chữ cái.

Side lưu ý: Bạn không cần phải sử dụng > trừ khi và cho đến khi bạn không có bất kỳ bảng con, đây là đủ .. tbody tr td:nth-child(3)

Answer 2

này nên làm điều đó:

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

Sử dụng một dấu phẩy giữa một selector như thế này cho phép bạn có nhiều bộ chọn bằng cách sử dụng phong cách cùng tuyên bố. Bạn có thể có nhiều bộ chọn được phân cách bằng dấu phẩy vì bạn muốn cho phép nhiều phần tử sử dụng cùng một kiểu.

Tôi có thể thêm trừ khi bạn có kiểu tạo xung đột trên trang, sử dụng .ListTaskTime tbody tr > td:nth-child(3) a khá cụ thể và có thể được đơn giản hóa thành một cái gì đó như .ListTaskTime td:nth-child(3) a.

Bạn cũng có thể quan tâm để biết về :nth-child(even) và :nth-child(odd) hay thậm chí phức tạp hơn selectors nth-child giả như :nth-child(2n+3) mà có thể giúp bạn nếu có nhiều cột sau này phù hợp với một mô hình được phong cách.

Answer 3

không hoàn toàn chắc chắn những gì bạn có ý nghĩa bởi "áp dụng lớp bằng cách chọn lớp "nhưng tôi thấy bạn muốn một chuỗi chọn css về cơ bản.

nếu, bởi cột thứ 5 con đó (?) Cần một lớp khác bạn ngụ ý tất cả những người khác nhưng đứa trẻ đó trong bảng có thuộc tính text-overflow: ellipsis trong đó, thì đây sẽ là một cách thay thế ngắn.

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

(điều kỳ lạ, nếu đối tượng phân loại là một <p>, mà chuỗi selector cụ thể không làm việc mặc dù là một <div> nó ..)

Người ta có thể cũng sử dụng tr>:nth-child() cũng nhắm mục tiêu tất cả các đối tượng chia sẻ cùng một không gian như <td>. tất cả các bit khó tính khác (nhiều truy vấn, v.v.) đã được những người khác phác thảo gọn gàng.Xin lỗi để nói rằng khi bạn có hai định dạng khác nhau trong một bảng, nó là khá nhiều không thể xác định chúng cả hai trong một bộ chọn duy nhất trong đồng bằng css..for bây giờ? ;)