Question

在我正在构建的简单寻呼机中，如果当前页面是第一页或最后一页，我需要将特定样式应用于当前页面。除了普通的类选择器之外，我不知道如何使用:first-of-type / :last-of-type选择器。

   <div id="myPages">
      <div class="something-else"></div>
      <div class="page-number current-page">1</div>
      <div class="page-number">2</div>
      <div class="page-number">3</div>
      <div class="another-one"></div>
  </div>

我喜欢#myPages .page-number:first-of-type.current-page之类的内容，但由于something-else和another-one div而无效。

例如，在我的jsFiddle中，我希望'1'为蓝色。

感谢您的帮助。

[edit]我已经更新了小提琴，我认为这是获得我想法的最佳方式：）

Answer 1

更新：由于帖子作者已更改了问题，我已更新了我的回答：

＆＃13;

#explain {
  margin-bottom: 20px;
}

#myPages .something-else+.current-page {
  color: blue;
}

#myPages div:nth-last-child(2) {
  color: red;
}

＆＃13;

<div id="explain">
  Please note:<br> - there will be only one 'page-number' with 'current-page' in my app<br> - I don't know in advance how many pages there will be (so nth-child cannot work)
</div>
<div id="myPages">
  <div class="something-else"></div>
  <div class="page-number current-page">1 - Should be blue because it is the first page-number <strong>and</strong> it has the current-page class</div>
  <div class="page-number">2</div>
  <div class="page-number current-page">3 - Nothing should happen</div>
  <div class="page-number current-page">4 - Should be red because it is the last page-number <strong>and</strong> it has the current-page class</div>
  <div class="another-one"></div>
</div>

＆＃13;

Css选择器：第一个/最后一个类型，并有另一个类

1 个答案: