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>

Answer 2

使用此选择器：.selectedBuildingButtons li:first-of-type a

如果只希望定位每个li中的第一个链接，请使用以下示例中的.selectedBuildingButtons li a:first-of-type。

观察两者之间的差异。

.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;
}

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

Answer 3

您可以使用与nth-child的小型hack而不是使用first-of-type。

<强> CSS：

.selectedBuildingButtons a:nth-child(1)
{
   background: #2d2d2d !important;
}

这将仅在第一次出现时应用背景。希望这会有所帮助：）

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

3 个答案: