在div中的特定<a>上应用CSS

Question

所以我在HTML中有以下div.现在我想知道有没有办法将CSS应用于前2 <a>和不同的Css 3<a>

<div id="contain">
    <div> 
        <a href="#" id="A">A</a>
        <a href="#" id="B">B</a>
        <a href="#" id="C">C</a>
    </div>
</div>

CSS:

#contain a {
    margin: 10px 20px 10px 20px;
    text-decoration: none;
    display: inline-block;
}

我想将上面的Css应用到<a>Div中的前2 位.

感谢帮助.:)

Answer 1

你应该nth-child()用来定位前两个元素......

#contain a:nth-child(-n+2){
    margin: 10px 20px 10px 20px;
    text-decoration: none;
    display: inline-block;
}

演示

更新:使用 :nth-of-type()

 #contain a:nth-of-type(-n+2){
    margin: 10px 20px 10px 20px;
    text-decoration: none;
    display: inline-block;
    color:red;
 }

演示