użyciu nth-child w tabelach tr td

Question

<table> 
    <tr> 
    <th>&nbsp;</th> 
    <td>$</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <th>&nbsp;</th> 
    <td>$</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <th>&nbsp;</th> 
    <td>$</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <th>&nbsp;</th> 
    <td>$</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <th>&nbsp;</th> 
    <td>$</td> 
    <td>&nbsp;</td> 
    </tr> 
</table> 

Oto mój kod, chcę <td> S z "$" z tle #CCC we wszystkich <tr> s.

Czy ktoś może mi pomóc, jak to zrobić, używając nth-child, pseudo klas?

Answer 1

table tr td:nth-child(2) { 
    background: #ccc; 
} 

przykład robocza: http://jsfiddle.net/gqr3J/

Answer 2

Aktualna wersja css nadal nie obsługuje selektor znaleźć przez treść. Ale jest sposób, używając selektora css find by attribute, ale musisz umieścić trochę identyfikatora na wszystkich <td>, które mają wewnątrz siebie $. Przykład: using nth-child in tables tr td

html

<tr> 
    <td>&nbsp;</td> 
    <td data-rel='$'>$</td> 
    <td>&nbsp;</td> 
</tr> 

css

table tr td[data-rel='$'] { 
    background-color: #333; 
    color: white; 
} 

Spróbuj te przykładowe.

table tr td[data-content='$'] { 
 
    background-color: #333; 
 
    color: white; 
 
}

<table border="1"> 
 
    <tr> 
 
     <td>A</td> 
 
     <td data-content='$'>$</td> 
 
     <td>B</td> 
 
     <td data-content='$'>$</td> 
 
     <td>C</td> 
 
     <td data-content='$'>$</td> 
 
     <td>D</td> 
 
    </tr> 
 
</table>