伪类首字母会影响所有按钮

Question

由于一些奇怪的原因,伪类首字母不起作用!所有按钮都会受到影响 我只想让第一个受到影响.可能有什么不对？

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>