css - CSS仅在两个孩子时选择第一个孩子

Question

有没有办法只在有第二个孩子的情况下选择第一个孩子？<p></p>只有当有第二个标签时，我才想隐藏第一个标签。有没有办法用 CSS 做到这一点？

我的代码是这个

<div>
    <p></p>
    <p>something</p>
</div>

Answer 1

你只能通过组合:first-childand来做到这一点:nth-last-child()，这意味着在纯 CSS 中你不会得到比 IE9 及更高版本更好的支持：

p:first-child:nth-last-child(2) {
    display: none;
}

如果您希望在第一个p有兄弟姐妹时隐藏第一个（即，总共是否有 2、3、4... 孩子并不重要），请改用它：

p:first-child:not(:only-child) {
    display: none;
}

Answer 2

解决方案是否需要跨浏览器兼容？如果是这样，我不确定是否可以使用 CSS 完成。但是，使用 jQuery 很容易实现：

jsFiddle：http: //jsfiddle.net/SVTxD/

$(document).ready(function(){
    $('div.myDiv').each(function(){
        console.log($(this).children().length);
        if ($(this).children('p').length > 1){
            $(this).children('p').first().hide();
        }
    });
});

或者（谢谢 BoltClock）：

$(document).ready(function(){
    $('div.myDiv p:first-child:nth-last-child(2)').hide();
});

如果 jQuery 不是一个选项（或者它不需要在旧浏览器中工作），那么 Josh C 的答案是正确的。

编辑：包括 @BoltClock 的建议作为替代方案。