html – 带有标题标记的第一个子伪选择器问题

发布时间：2020-12-14 23:43:16 所属栏目：资源来源：网络整理

导读：当我在我的部分开头添加一个标题标签并且div内的一个p标签的第一个孩子停止工作时,我在设计动态新闻页面时遇到了困难. 这就是我试图做的事情,直到我添加标题标记才有效. .pubs .newsdate { border-top:1px solid rgb(255,179,0);}.pubs:first-child .newsdat

当我在我的部分开头添加一个标题标签并且div内的一个p标签的第一个孩子停止工作时,我在设计动态新闻页面时遇到了困难.
这就是我试图做的事情,直到我添加标题标记才有效.

.pubs .newsdate {
    border-top:1px solid rgb(255,179,0);
}
.pubs:first-child .newsdate {
    border:none;
}

<section class="content">
    <h2>News</h2> //issue
    <div class="pubs">
        <p class="newsdate">stuff</p>
    </div>
    <div class="pubs">
        <p class="newsdate">stuff</p>
    </div>
    <div class="pubs">
        <p class="newsdate">stuff</p>
    </div>
</section>

正确删除第一个边框,直到我添加标题(h2)标记.
然后,伪选择器停止工作.
可能发生了什么？

解决方法

.pubs：first-child查找一类pubs,它也是其父元素的第一个子元素(在这种情况下,parent元素是类内容.一旦你在第一个pubs类之前添加一个h2元素,那么pubs就不再了第一个孩子,但第二个.

试试.pubs：first-of-type代替：

.pubs:first-of-type .newsdate {
    border: none;
}

：first-of-type伪选择器将查找您添加的任何类或ID或元素的第一种类型.通过这个,我的意思是,如果一个元素(div),一个类(.pub)或一个ID(#pub)出现在伪选择器之前(每个都是有效的)并不重要.虽然使用ID没有多大意义,因为它们应该是唯一的.

还要注意我说的第一种类型,而不是第一种情况(两个人已经评论过(一个人已经删除了他们的评论)混淆了我在说什么).例如,如果在三个div元素和两个p元素上有类.pubs,则：first-of-type伪选择器将应用于第一个.pubs div元素和第一个.pubs p元素.

因此,第一类伪选择器可以应用于多个元素,具体取决于您使用它的方式.

如果你考虑一下,这是一个比你第一次使用它时更好的解决方案,因为这个解决方案专门针对.pubs类的第一个实例,而你的例子只能在有条件的情况下工作(之前没有任何东西).酒吧).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!