CSSテーブル：n番目の子は、（1）TD：n番目の子（1）

Question

を働いていない。これは、https://www.lemeilleuravis.com/nikon-s7000-test/

私のサイトでこれが作業しなければならないコードですが、何らかの理由でない：

table:nth-child(1) td:nth-child(1):before { 
    content: "✓"; 
    color: green; 
    font-size: 200%; 
    float: left; 
} 

table:nth-child(2) td:nth-child(1):before { 
    content: ""; 
    font-size: 200%; 
    float: left; 
} 

table:nth-child(1) td:nth-child(1) { 
background:green; 
} 

table:nth-child(2) td:nth-child(1) { 
background:red 
} 

私はtable：nth-​​child（1）td：nth-​​child（1）：w3schools tryitの前にいくつかのテストを行いました。

これはスペース

<table> 
<tbody> 
<tr> 
<td width="302">xxx</td> 
<td width="302">xxx</td> 
</tr> 
<tr> 
<td width="302">xxx 

</td> 
</tr> 
<tr> 
<td width="302">xxx</td> 
<td width="302">xxx</td> 
</tr> 
<tr> 
<td width="302">xxx</td> 
<td width="302">xxx</td> 
</tr> 
<tr> 
<td width="302">xxx</td> 
<td width="302">xxx</td> 
</tr> 
<tr> 
<td width="302">xxx</td> 
<td width="302">xxx</td> 
</tr> 
<tr> 
<td width="302">xxx</td> 
<td width="302">xxx</td> 
</tr> 
</tbody> 
</table> 

に編集、保存するためにXXXと置き換えるテキストを持つ最初の表である：私は解決策を見つけたが、私の代わりにn番目の子のn-の型を使用して終了し、それが働きました。

Answer 1

マークアップを確認してください。私の前提は、最初の表の前に別の要素があるということです。 Im on mobileとしてページを確認してください。 codepenまたはjsfiddleで試してみてください。表のマークアップとcssを使用して、問題が引き続き発生するかどうかを確認してください。

EDIT コンテナには、テーブル自体以外の要素があります。 nth-childが動作するように、テーブルを独自のコンテナにラップするか、テーブルのクラスを割り当てます。

Answer 2

チェックマークの色は背景と同じですので、表示されません。私達にあなたのhtmlの一部を表示

td:nth-child(1):before { 
 
    content: "✓"; 
 
    color: white; 
 
    font-size: 200%; 
 
    float: left; 
 
} 
 

 
td:nth-child(2):before { 
 
    content: ""; 
 
    font-size: 200%; 
 
    float: left; 
 
} 
 

 
td:nth-child(1) { 
 
background:green; 
 
} 
 
td:nth-child(2) { 
 
background:red 
 
}

<table> 
 
<tbody> 
 
<tr> 
 
<td width="302">xxx</td> 
 
<td width="302">xxx</td> 
 
</tr> 
 
<tr> 
 
<td width="302">xxx 
 

 
</td> 
 
</tr> 
 
<tr> 
 
<td width="302">xxx</td> 
 
<td width="302">xxx</td> 
 
</tr> 
 
<tr> 
 
<td width="302">xxx</td> 
 
<td width="302">xxx</td> 
 
</tr> 
 
<tr> 
 
<td width="302">xxx</td> 
 
<td width="302">xxx</td> 
 
</tr> 
 
<tr> 
 
<td width="302">xxx</td> 
 
<td width="302">xxx</td> 
 
</tr> 
 
<tr> 
 
<td width="302">xxx</td> 
 
<td width="302">xxx</td> 
 
</tr> 
 
</tbody> 
 
</table>