css - 选择 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;
}