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元素。

Answer 1

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

如果您总是在最后修改并且只想定位倒数第二个孩子，那么您可以使用。

nth-last-child(2)

正如其名称所暗示的那样，无论它是什么，都会瞄准倒数第二个元素。 View on JSFiddle.

如果您一直在使用div，那么您也可以使用此代码获得相同的效果：

nth-last-of-type(2)

View that one on JSFiddle.

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

当然，您可以简单地删除:last-child位以定位所有 span 类div，无论它们在父级中的位置如何：

 [class*="span"]

View on JSFiddle