CSS选择第一个孩子

时间:2013-08-19 17:36:13

标签: css css-selectors

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

如果我的标记是这样的:

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

修改


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

之上

3 个答案:

答案 0 :(得分:3)

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

您不能使用nth-childlast-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/

答案 1 :(得分: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一起使用时,您可以在所有浏览器上使用这些选择器。我希望这有帮助!

答案 2 :(得分: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")

干杯!