css: áp dụng quy tắc trên <th> đầu tiên <tr> nếu có 2 <tr>

Question

Có thể áp dụng một quy tắc tại <th> đầu tiên của <tr> đầu tiên nếu có 2 hoặc nhiều <tr> trong <thead>?

tôi đã làm:

table tr:first-child th:first-child 

nhưng nếu chỉ có 1 <tr> là ti áp dụng anyway.

Answer 1

Bạn có thể sử dụng một sự kết hợp của :not() và :only-child selectors như vậy:

tr:first-child:not(:only-child) th:first-child { 
    color:red; 
} 

Mã là tương đối tự giải thích, nó sẽ chỉ ảnh hưởng đến đứa con đầu lòng nếu nó không phải là một đứa con duy nhất.

DEMO

Nó có tương đối xấu support tuy nhiên, bạn có thể cần một javascript polyfill để bù đắp cho nó nếu bạn cần hỗ trợ IE8 hoặc thấp hơn.

Answer 2

Tôi không nghĩ rằng điều này là có thể mà không cần sử dụng css class. Nếu bạn đang tạo động của tr. Tôi muốn giới thiệu để làm như sau:

if(condition for rows > 2) { 
    <tr><th class="applyCSS"></th><th></th></tr> 
    <tr><th></th><th></th></tr> 
    ...... 
} 
else {  //only one tr 
    <tr><th></th><th></th></tr> 
} 

CSS:

applyCSS { .... }