擬似クラス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を選択する必要があります。この場合はliだけがulの直接の子になることができるので、代わりにfirst-childを使用することもできます。

.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の最初のリンクをターゲットにしたい場合。

両方の違いを確認してください。あなたが代わりに最初の型を使用してのn番目の子を持つ小さなハックを使用することができます

.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

。

CSS：

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

これは最初の出現の背景を適用します。希望がこれを助ける:)