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

Question

所以我在 HTML 中有以下 div。现在我想知道是否有一种方法可以将 CSS 应用于前 2 <a>和 3 日的不同 Css <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 应用到前 2 个 <a>在分区中。

感谢您的帮助。 :)

Answer 1

你应该使用 nth-child()以前两个元素为目标...

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

Demo

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

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

Demo