Question

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

我的代码就是这个

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

Answer 1

你只能通过组合:first-child和: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的建议作为替代。

只有两个孩子，CSS才会选择第一个孩子

2 个答案: