选择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

script是div的第一个子脚本，因此无法选中它。如果您想访问第一个dl，请使用dl:first-of-type

这是小提琴链接

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