3

我仍在尝试弄清楚如何正确使用我nth的first, 和lastchild 选择器。谢谢你的耐心。

如果我的标记是这样的：

<div class="the-wrapper">
    <table class="the-table">
       <!-- the table -->
    </table>

    <table class="the-table">
       <!-- the table -->
    </table>
</div>

如何选择最后一个<table class="the-table">应用保证金？

我以为我可以像这样选择它：.the-wrapper .the-table:last-child { /* css */ }但这不起作用。我错过了什么？谢谢！

编辑

对不起大家我错误地打印了我的标记......正确的标记在上面

4

3 回答 3

3

+用于选择“兄弟”元素。（兄弟姐妹是同一个父母的孩子）http://jsfiddle.net/Lhmjq/

您不能为此使用nth-child或；last-child顾名思义，是 for childs，除非你放一个父母，否则你做不到。

这是一个父母的例子： http: //jsfiddle.net/Lhmjq/2/在这种情况下，完成了last-child

（更新为您的新代码）这是一个小问题：http: //jsfiddle.net/Lhmjq/4/ 

.the-wrapper .the-table:last-child {
    color: blue;
}

用你的新代码更新：http: //jsfiddle.net/Lhmjq/4/

于 2013-08-19T17:37:44.297 回答
1 
.the-wrapper .the-table:last-child { /* css */ }

前面的代码应该选择包装器中的最后一个表。结构伪类的目标可能会令人困惑。伪类是根据它的直接父类定义的。例如，假设您有一个元素列表：

<ul class="target-me">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

并且您想定位li列表中的最后一个。您的 CSS 将是：

.target-me > li:last-child { color: red; }

您还可以使用伪选择器从 DOM 中的位置定位编号项目，比如我想定位第二个元素：

.target-me > li:nth-child(2) { color: red; }

您还可以在选择器层次结构中使用这些伪选择器。

.target-me > li:first-child span { ... }

您还可以链接伪选择器：

.target-me > li:first-child:hover { ... }

与Selectivizr这样的 polyfill 结合使用，您可以在所有浏览器上使用这些选择器。我希望这有帮助！

于 2013-08-19T17:38:04.707 回答
0

您的代码“ ”将返回所有“ ”类.the-wrapper .the-table:last-child的最后一个子元素。.the-wrapper您要做的是选择最后一个“ .the-wrapper”元素。下面的代码将选择最后一个“”元素的最后一个子表.the-wrapper，这就是您要查找的...

$('.the-wrapper .the-table:last-child').last().css("border","1px solid #b5b5b5")

干杯!

于 2013-08-19T18:09:57.180 回答