如果父项具有一个子项,则CSS选择器用于创建CSS样式,而对于两个子项,则为CSS样式

Question

是否有可能使用纯CSS选择器为子节点(在我的情况下为UL)提供不同的属性,特别是高度,基于孩子的兄弟姐妹数量？

例如,如果一个节点有1个子节点,则UL的高度是自动的,但是如果该节点有2个子节点,那么这些子节点的高度是'200px'？

Answer 1

你在找:

如果列表项是唯一的子项,则其高度将为auto.如果有多个列表项,则列表项的高度均为200px.

ul li {
     height: 200px;
}

ul li:only-child {
     height: auto;
}

需要注意的是,除IE8及更早版本外,所有浏览器都支持only-child. http://reference.sitepoint.com/css/pseudoclass-onlychild

Answer 2

我不完全确定浏览器的兼容性,但是

ul li:first-child:last-child {
     height: auto;
}

工作以及最后,使得很多很多:)