css - CSS 匹配正则表达式和 last-child

Question

我正在尝试将所有元素与一类等相匹配span1, span2, span3, span4。

我正在使用以下代码，但它与这些类的最后一个孩子不匹配：

[class*="span"]:last-child{
    margin-left:0;
}

例如，如果我有：

<div>
   <div class="span3"></div>
   <div class="span9"></div>
   <div class="clearfix"></div>
</div>

该规则不适用于.span9元素。

score 3 · Accepted Answer

last-child适用于父母的最后一个孩子。在您的示例中，它正在查看最后一个div并看到它的类是clearfix - 而不是其中包含span的东西 - 并且无法匹配。

如果您总是在最后清除固定并且只想定位倒数第二个 child，那么您可以使用。

nth-last-child(2)

顾名思义，这将针对倒数第二个元素，无论它是什么。在 JSFiddle 上查看。

如果您总是使用divs，您也可以使用此代码来获得相同的效果：

nth-last-of-type(2)

IE9 或更高版本对所有这些模式（last-child、nth-last-child 和 nth-last-of-type）的 IE 支持是相同的。

当然，你可以简单地去掉这个:last-child位来定位你所有的span类 div，不管它们在父级中的什么位置：

 [class*="span"]

1 回答 1