Question

我无法解释为什么它不起作用。我有下一个HTML：

<div id="show-entrevistas-home">
  <div id="banner-lateral"></div>
  <div id="post-410" class="post-410 type-entrevistas status-publish hentry has-post-thumbnail"></div>
  <div id="post-408" class="post-408 type-entrevistas status-publish hentry has-post-thumbnail"></div>
  <div id="post-406" class="post-406 type-entrevistas status-publish hentry category-destacado has-post-thumbnail"></div>
</div>

和下一个CSS：

#show-entrevistas-home div[id*='post-'].type-entrevistas:first-of-type {
   margin-top: 240px !important;    
}

当我删除:first-of-type时，上面的CSS有效，但它没有使用它（第一篇文章没有得到规则）。想知道:first-of-type会发生什么事吗？

Answer 1

引用MDN docu on :first-of-type：

：first-of-type CSS伪类在其父元素的子元素列表中表示其类型的第一个兄弟。

因此它指定类型而不是类（甚至整个选择器）。在您的情况下，:first-of-type会引用<div>类banner-lateral，而所有其他选择器引用带有<div>类的post-x。

两者的交集都是空的，因此您的样式规则永远不会被应用。

解决方法可能是将第一个<div>的类型更改为其他内容。似乎<div>应该只保留横幅广告，因此请将其设为<img>或使用<span>并相应地调整其行为。

<div id="show-entrevistas-home">
  <img id="banner-lateral" />
  <div id="post-410" class="post-410 type-entrevistas status-publish hentry has-post-thumbnail"></div>
  <div id="post-408" class="post-408 type-entrevistas status-publish hentry has-post-thumbnail"></div>
  <div id="post-406" class="post-406 type-entrevistas status-publish hentry category-destacado has-post-thumbnail"></div>
</div>

或

<style>
  #banner-lateral {
    display: block; /* to make it behave like a div */
  }
</style>
<div id="show-entrevistas-home">
  <span id="banner-lateral"></span>
  <div id="post-410" class="post-410 type-entrevistas status-publish hentry has-post-thumbnail"></div>
  <div id="post-408" class="post-408 type-entrevistas status-publish hentry has-post-thumbnail"></div>
  <div id="post-406" class="post-406 type-entrevistas status-publish hentry category-destacado has-post-thumbnail"></div>
</div>

Answer 2

如何使用nth-child：

<强> FIDDLE

#show-entrevistas-home div[id*='post-']:nth-child(2) {
   margin-top: 240px;    
}

：第一个类型选择器不起作用

2 个答案: