utilizzando nth-child in tabelle 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> 

Ecco il mio codice, voglio <td> s con "$" con uno sfondo di #CCC in tutte le <tr> s.

Qualcuno può aiutarmi a farlo utilizzando nth-child, pseudo classi?

Answer 1

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

esempio di lavoro: http://jsfiddle.net/gqr3J/

Answer 2

versione css attuale ancora non supporta selettore di trovare in base al contenuto. Ma c'è un modo, usando il selettore di CSS per trovare l'attributo, ma devi mettere un identificatore su tutti gli <td> che hanno $ all'interno. Esempio: 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; 
} 

Si prega di provare questi esempio.

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>