Question

我已尝试使用first-child和first-of-type来隐藏第一类“入门列表”但不起作用。

这是我的代码：

HTML

<div class="entry-content">
  <div class="row">
    <h2>Title</h2>
    <div class="view-more"></div>
    <div class="entry-list"></div>
    <div class="entry-list"></div>
    <div class="entry-list"></div>
  </div>
</div>

CSS

.entry-content>.row>div.entry-list:first-of-type {
    display: none;
}

非常感谢提前

Answer 1

如果您在.view-more课程中更改了元素，则可以使用first-of-type

＆＃13;

.row div:first-of-type {
  display: none
}

＆＃13;

<div class="entry-content">
  <div class="row">
    <h2>Title</h2>
    <span class="view-more">VM</span>
    <div class="entry-list">1</div>
    <div class="entry-list">2</div>
    <div class="entry-list">3</div>
  </div>
</div>

＆＃13;

Answer 2

如果用另一个div包装你的条目列表div，你可以轻松完成这项工作。

您可以在这里阅读更多内容： https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

<div class="entry-content">
  <div class="row">
    <h2>Title</h2>
    <div class="view-more"></div>
    <div class="entry-lists">
        <div class="entry-list">First</div>
        <div class="entry-list">Second</div>
        <div class="entry-list">Last</div>
    </div>
  </div>
</div>

这是一个工作小提琴： https://jsfiddle.net/h92dfz3o/

Selector first-child，first-of-type not working

2 个答案: