html - HTML、CSS 和 jQuery 选择器之谜

Question

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

<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 {
       …
}

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');

问候。