CSS для стилирования второго заголовка th элемента в таблице с начальным индексом 0

Question

Я хотел бы применить некоторые специальные стили ко второму элементу заголовка в html ниже.

Какой CSS я использовал бы для этого?

Я попробовал этот CSS, но он не работает:

table > tr > th:nth-child (2) { 
    /*some styles*/ 
} 

<table width="100%" border="1"> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>City</th> 
    </tr> 
    <tr> 
     <td>Sunil</td> 
     <td>34</td> 
     <td>Toronto</td> 
    </tr> 
    <tr> 
     <td>Mike</td> 
     <td>36</td> 
     <td>Dallas</td> 
    </tr> 
    <tr> 
     <td>Ricky</td> 
     <td>46</td> 
     <td>El Paso</td> 
    </tr> 
</table> 

Answer 1

Вы пропустили (автоматически вставлена) tbody от вашего выбора:

table > tbody > tr > th:nth-child(2) { 
    /* styles */ 
} 

Вы могли бы, конечно, просто используйте менее конкретный селектор в этом случае:

th:nth-child(2) { 
    /* styles */ 
} 

Это работает, потому что <th> всегда с <tr> и всегда в пределах <table>; единственным предком, который может меняться (внутри таблицы), является tbody (вместо этого вместо этого может быть либо <thead>, либо <tfoot>).