为了账号安全,请及时绑定邮箱和手机立即绑定

:第一个孩子不能按预期工作

/ 猿问

:第一个孩子不能按预期工作

函数式编程 2019-09-24 16:28:58

我试图选择一个名为的类中的第h1一个。如果它是其中的第一个元素,它会起作用,但是如果在它之后出现,它将不起作用。divdetail_containerh1divul


<style type="text/css">

.detail_container h1:first-child

{

color:blue;

</style>

</head>

<body>

<div class="detail_container">

    <ul>

    <li></li>

    <li></li>

    </ul>

    <h1>First H1</h1>

    <h1>Second H1</h1>

</div>

</body>

</html>

我的印象是,h1无论它在哪里,我拥有的CSS都会选择第一个div。我该如何运作?


查看完整描述

3 回答

?
qq_花开花谢_0

该h1:first-child选择装置



当且仅当它是一个h1元素时,才选择其父项的第一个孩子。


所述:first-child容器的这里是ul,这样不能满足h1:first-child。


:first-of-type您的情况有CSS3 :


.detail_container h1:first-of-type

{

    color: blue;

但是由于浏览器兼容性问题而已,那么最好还是给第h1一个类一个类,然后再定位该类:


.detail_container h1.first

{

    color: blue;

}


查看完整回答
反对 回复 2019-09-24
?
守候你守候我

:first-childh1 当且仅当它是其父元素的第一个子元素时,才选择第一个。在您的示例中,ul是的第一个孩子div。


伪类的名称是有点误导,但它解释清楚漂亮这里的规范。


jQuery的:first选择器可为您提供所需的内容。你可以这样做:


$('.detail_container h1:first').css("color", "blue");


查看完整回答
反对 回复 2019-09-24
?
慕盖茨1488219

对于这种特定情况,您可以使用:


.detail_container > ul + h1{ 

    color: blue; 

}

但是,如果在许多情况下都需要相同的选择器,则应该为这些选择器提供一个类,如BoltClock所说。


查看完整回答
反对 回复 2019-09-24

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信