<分区>
标签 html css css-selectors
<分区>
在我正在构建的简单寻呼机中，如果当前页面是第一页或最后一页，我需要将特定样式应用于当前页面。我不知道如何使用 :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 它不起作用和另一个 div。
在我的jsFiddle例如，我希望“1”是蓝色的。
感谢您的帮助。
[edit] 我已经更新了 fiddle ，我认为这是获得我的想法的最佳方式:)
最佳答案
更新:由于帖子作者更改了他们的问题，我更新了我的答案:
#explain {
margin-bottom: 20px;
}
#myPages .something-else+.current-page {
color: blue;
}
#myPages div:nth-last-child(2) {
color: red;
}<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>关于html - CSS 选择器 : first/last-of-type and has another class，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44391954/