Html 祖父母的第一个孩子

我在一个div中有多个div。 我希望父div的第一个h1加下划线。 第一个孩子的问题是它看的是父div，在我的例子中，它是错误的父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需要加下划线
呜呜呜呜
布拉布拉布拉
大布拉布拉布拉布拉布拉，但没有下划线

我只希望第一个h1加下划线，但使用

。框h1:firstchild

将导致两个h1都加下划线。 帮助？

使用：

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

请注意，

第一个子项

应用于

div

，而不是

h1

标记

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

如果在first

div

中有多个

h1

，它将只在first

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

---

如果第一个

标签始终位于第一个

中，则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>

JS:

.underlined {
  text-decoration: underline;
}

(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'));

（功能（H1s）{
变量H1数量=H1s长度，
祖父母
框=[]；
//循环H1s并将类名添加到第一个出现的H1
对于（var i=0；仅当
h1
在第一个
div
中时，它才起作用。如果不是呢？@Moshe学习阅读文档（在本例中，）。这是在有人告诉你事情是如何完成的之后你能做的最起码的事情。我可能误解了这个问题，那么这应该是公认的答案。@Tim你的答案也是正确的。我只是补充了更多。Vucko想说的是，如果第二个div有h1，而不是第一个div。我也在努力解决这个问题。@pratikwebdev you m我可能误解了Vucko的观点。@Vucko基本上是说“如果第一个
在第二个或第三个
中呢？”@ArmanOzak这就是我的意思。我得到了vuckos的观点。因此我试图弄明白。@pratikwebdev好的，那么请注意，目前还不存在一个针对他所指内容的纯CCS解决方案。建议使用一个
：has（）
伪类来检查内部元素，但浏览器还没有这个功能（而且他们可能不会很快收到）。您的答案将仅在第一个
中的第一个
下划线。尝试使用
bla-bla-bla
或
bla-bla-bla-2
切换
第一个h1需要下划线，您将明白我的意思。