HTML，CSS和jQuery选择器的谜语

Question

有没有办法在不使用CSS 2跨浏览器支持更改HTML的情况下选择第二个内部div？

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

Answer 1

试试这个选择器，任何都可以正常工作：

  div table div { ... }

或

  div table tr td div { ... }

Answer 2

$("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 

这将影响主div内的仅第二个div ，而不使用css3。 [第一个孩子不是css3]

Answer 3

你可以使用邻接选择器

div + div

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

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

Answer 4

尝试使用此选择器

div div + div {
       …
}

<强> Demo on 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');

问候。