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;
}

工作以及最后，做了很多事情：）

Answer 3

CSS不是一种逻辑语言。你不能使用“if this do that”逻辑。所以你应该使用jQuery进行这种练习。

修改

这是您需要的代码

 var liCount = $("ul li").size();  // How many list items UL' have

 var constant = 10;   // Constant px Value for calculate new pixel.

 $("ul li").css("height",constant*liCount);  //Css manipulation

 $(".result").html(constant*liCount+"px is the li's height");  // what is the result

 <ul>
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
    <li>Fourth List Item</li>
 </ul>

你可以测试一下在jsfiddle中（我在jquery中定义了看到更改的高度）

http://jsfiddle.net/guJBt/1/

Answer 4

假设问题的原因是您的UL是动态生成的，您可以使用相同的代码为这些UL定义唯一ID，以便CSS可以正确应用

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

4 个答案: