在css中选择第一个dl元素

Question

我有这个HTML：

<div id="gallery-1" class="gallery galleryid-39 gallery-columns-3 gallery-size-thumbnail gallery1">

<script type="text/javascript"></script>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<br style="clear: both"></br>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<br style="clear: both"></br>

</div>

和这个css：

.gallery dl:first-child {
display: none;
}

它不起作用，我不知道为什么

Answer 1

dl:first-child与<dl>元素不匹配，因为它不是其父级的第一个孩子。 （实际上.gallery的第一个孩子是<script>元素

为了定位第一个<dl>元素，您可以改为使用:first-of-type伪类：

.gallery > dl:first-of-type {
    display: none;
}

Answer 2

脚本是div的第一个孩子。所以它不能被选中。如果你想先访问dl，那么使用dl：first-of-type

这是小提琴link

<div id="gallery-1" class="gallery galleryid-39 gallery-columns-3 gallery-size-thumbnail gallery1">

<script type="text/javascript"></script>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<br style="clear: both"></br>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<br style="clear: both"></br>

</div>



.gallery > dl:first-of-type {
display:none
}