Question

我仍在尝试弄清楚如何正确使用我的nth，first和last子选择器。谢谢你的耐心等待。

如果我的标记是这样的：

<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 */ }但这不起作用。我错过了什么？谢谢！

修改

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

之上

Answer 1

+用于选择＆＃34;兄弟姐妹＆＃34;元素。（在同一父母的孩子意义上的兄弟姐妹）http://jsfiddle.net/Lhmjq/

您不能使用nth-child或last-child这样做;正如名字所说，是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/

Answer 2

.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一起使用时，您可以在所有浏览器上使用这些选择器。我希望这有帮助！

Answer 3

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

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

干杯！

CSS选择第一个孩子

3 个答案: