Select a class 使用 CSS 基于它是否有任何共享相同 class 的兄弟姐妹

Question

所以，我在一个设计框架中工作，该框架大量使用行高来实现垂直居中。我目前有一个绝对定位的 HTML 元素，内部垂直居中 text/content，当我添加另一个相同的元素作为兄弟元素时，我希望它占据相同的 space，但改变兄弟姐妹的每个（第一个和第二个）的行高，使它们 raise/lower 一点，显示为两个堆叠的、垂直居中的实体。例如：

<div class="container">
    <div class="inner">inner alone</div>
</div>
<div class="container">
    <div class="inner">inner1, move me up a bit!</div>
    <div class="inner">inner2</div>
</div>

"inner alone" 在其容器内垂直居中。 "inner1" 和 "inner2" 应该相互堆叠，并且垂直居中，每个行高不同。

我可以轻松地定位第二个同级元素 ("inner2") 并更改其行高，使用 inner+inner、inner:nth-of-child 等等我敢肯定。但是，如何使用 CSS 定位 "inner1" 而不是 "inner alone"？这可能吗？

这里有一个例子：http://jsfiddle.net/pxc0uug2/

我对重做整个事情不是很感兴趣。如果有必要，我可以弄清楚，但是我只对我是否可以只使用它的位置和 class 名称来定位 "inner1" 感兴趣，而不是同时定位 "inner alone."

Answer 1

您可以使用

定位它

.inner:nth-last-child(2) {
    color: red;
}

fiddle

Select a class 使用 CSS 基于它是否有任何共享相同 class 的兄弟姐妹

Select a class using CSS based on whether or not it has any siblings that share the same class

html

css

css-selectors