Question

我在div中有多个div。我希望父div的第一个h1加下划线。 first-child的问题是它查看了父div，在我的例子中是父错误。例如：

        <div class="box">
            <div><h1>first h1 needs to be underlined</h1></div>
            <div>bla bla bla</div>
            <div>bla bla bla2</div>
            <div><h1>big bla bla bla but not underlined</h1></div>
        </div>

我只希望第一个h1加下划线，但使用.box h1:firstchild会导致h1加下划线。帮助

Answer 1

.box > div:first-of-type > h1:first-of-type{
    text-decoration: underline;
}

如果您在第一个h1中有多个div，则只会在第一个h1下划线。只是Tims回答的补充

更新JQuery解决方案，在任何第一个div中强调h1

var h1Found = false;
$( ".box > div " ).each(function( index ) {

   $(this).find("h1").each(function(){
       if(h1Found) return false;
       $(this).css("text-decoration", "underline" );
       h1Found = true;
   })
});

Answer 2

使用：

.box > div:first-child > h1 {
    text-decoration: underline;
}

请注意，first-child适用于div而非h1代码。

Answer 3

如果您的第一个<h1>标记始终位于您的第一个<div>中，那么 Tim 和 pratikwebdev 提供的答案都将有效。但是，正如评论中提到的 Vucko ，如果您遇到类似下面的情况，那么单靠CSS无法帮助您。

<div class="box">
    <div>bla bla bla</div>
    <div><h1>first h1 needs to be underlined</h1></div>
    <div>bla bla bla2</div>
    <div><h1>big bla bla bla but not underlined</h1></div>
</div>

你看，当前可用的CSS选择器只能单向工作，即父对子（ren）或元素到下一个兄弟，但不是父对象或前一对兄弟的元素（ S）。因此，一旦选择了子（ren），就没有回到父级别，或者一旦选择了下一个兄弟，就没有回到当前元素。实际上，这就是使CSS如此之快的原因。

选择器级别4草稿 suggests一个:has()伪类，它可以在选择下一个兄弟之前检查内部元素。尽管如此，浏览器还没有这个功能，它们可能很快就没有它，即使它们这样做，它也将是最新一代浏览器所独有的，并且不会被我们现有的浏览器所支持。

那么，可以做些什么呢？好吧，您可以使用.has()方法或jQuery的:has()选择器或您自己的 JavaScript 函数将特定类直接放在第一个<h1>上。我个人认为jQuery对于那些容易的事情是必要的。

<强> CSS：

.underlined {
  text-decoration: underline;
}

<强> JS：

(function(H1s){
    var H1qty = H1s.length,
        grandParent,
        boxes = [];

    // Loop through H1s and add class name to first occuring H1
    for(var i=0; i<H1qty; i++){
        grandParent = H1s[i].parentNode.parentNode;
        if(grandParent.className === 'box' && boxes.indexOf(grandParent) < 0){
            H1s[i].className = 'underlined';
            boxes.push(grandParent);
        }
    }   

})(document.querySelectorAll('h1'));

工作示例here。

祖父母的第一个孩子

3 个答案: