2

要素にスタイルを配置する必要がありますが、要素にクラスまたはIDがありません。また、コードのその部分を編集してクラスまたはIDを配置することもできません。

jQueryでは、.eq [4]などで選択しますが、使用できるのはCSSのみです。

したがって、問題は、2番目の<tr>の2番目の<td>のスタイルを設定できますか？

<table class="tableClass">
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td> I NEED TO STYLE THIS ONE </td>
        <td>...</td>
    </tr>
</table>
4

3 に答える 3

3

を使用できますが、とその親の両方:nth-child()で使用する必要があります。td tr

.tableClass > tr:nth-child(2) > td:nth-child(2)
于 2012-04-16T17:42:39.860 に答える
1

確かに、nth-childセレクターを使用してください。この場合、

table tr:nth-child(2) td:nth-child(2)

これがどのように機能するかについての素晴らしい説明です。

于 2012-04-16T17:44:00.420 に答える
1

互換性を高めるためにIE7とIE8でも機能する代替方法を次に示します。

.tableClass tr + tr > td + td {
  /* selects 2nd to last td from 2nd to last rows.
     Do something here with some CSS instructions of your choice.
     Beware of thead and th, they aren't expected in your example */
}
.tableClass tr + tr > td + td + td,
.tableClass tr + tr + tr > td + td {
  /* selects 3rd to last td from 2nd to last rows and also
     2nd to last td from 3rd to last rows.
     Cancel here everything you did in previous CSS rule! */
}
  • td + td最初のものを除くすべてを選択し、最初と2番目を除くすべてを選択しますtd。2つのCSSルールを使用します。行も考慮する必要があるため、例はさらに複雑になりますが、後者のセレクタールールをセレクターと組み合わせるだけです。 td + td + tdtdtr + tr + tr
  • これは置き換えるための素晴らしいトリックで:not(:first-child)あり、それについて知る価値があります。あなたの例のようにそれがより複雑になったときにそれを使うかどうかはあなた次第です。
  • h3、p、h4、pのように異なる要素を処理する場合は、を（一般的な兄弟）に置き換える+ことができます。~ここにはありませんp + pが、それでもありますp ~ p。
  • 上記のコードは、tbody要素がとの間tableにあるかどうかに関係なく機能します。これは、それぞれがの子であるとtrは想定しておらず、子孫のみであるためです。trtable
于 2012-04-16T21:46:04.727 に答える