html - HTML、CSS、jQueryセレクターの謎

Question

CSS 2クロスブラウザサポートを使用してHTMLを変更せずに2番目の内部divを選択する方法はありますか？

<div>
    <table>
          <tr>
              <td>
                   <div></div>
                   <div></div>
              </td>
          </tr>
    </table>
</div>

Answer 1

隣接セレクターを使用できます

div + div

http://jsfiddle.net/kudoslabs/rysys/

参照：http ：//www.w3.org/TR/CSS2/selector.html#adjacent-selectors

Answer 2

このセレクターを試してみてください。どれでもうまくいきます:

  div table div { ... }

また

  div table tr td div { ... }

Answer 3

$("div div:nth-child(2)").css ( "CSS GOES HERE" );  // index starts from 1

---

$("div div:eq(1)").css ( "CSS GOES HERE" );;  // index starts from 0

これは、ブラウザーが css3 をサポートしているかどうかに関係なく、すべてのブラウザーで機能します。

編集
前述のように、ブラウザーがcss2のみをサポートしている場合でも上記のコードは機能しますが、パズルのみの場合は

div  div:first-child + div 

これは、css3 を使用せずにメイン div 内の2 番目の div のみに影響します。[最初の子は css3 ではありません]

Answer 4

このセレクターを使用してみてください

div div + div {
       …
}

dabblet.com のデモ

これらの css ルールでこの結果を達成します。

div {
    padding: 5px;
    background: yellow;
}

div div + div {
    background: red;
}

Answer 5

jqueryセレクターを使用して内部divを見つけようとしている場合は、次のコードが役立ちます

var innerDiv = $('table').find('div');

そしてアウター用

var outerDiv = $('table').parents('div');

よろしく。