css - 伪类first-of-type影响所有按钮

Question

出于某种奇怪的原因，伪类first-of-type不起作用!所有按钮都会受到影响。我只是希望第一个受到影响。可能出了什么问题？

HTML:

<div class="selectedBuildingButtons">  
<ul>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
</ul>
</div>

CSS:

.selectedBuildingButtons a 
{
display: block;
font-size: 30px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
background: #c3c3c3;
padding: 15px 20px 15px 20px;
border-radius: 6px;
color: #fff;
}

.selectedBuildingButtons a:first-of-type
{
background: #2d2d2d !important;
}

Answer 1

它会在当前父级中查找所选元素的第一个类型，在本例中为 a ，并且它将选择所有 a 元素，因为每个元素都是第一个该类型位于其父级 li 内。因此，您需要先选择li，然后选择其中的a。在这种情况下，您还可以使用 first-child 来代替，因为只有 li 可以是 ul 的直接子级。

.selectedBuildingButtons a {
  display: block;
  font-size: 30px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background: #c3c3c3;
  padding: 15px 20px 15px 20px;
  border-radius: 6px;
  color: #fff;
}

.selectedBuildingButtons li:first-of-type a {
  background: #2d2d2d !important;
}

<div class="selectedBuildingButtons">
  <ul>
    <li><a href='#'>1</a></li>
    <li><a href='#'>2</a></li>
    <li><a href='#'>3</a></li>
  </ul>
</div>