Question

所以我在HTML中使用了以下div。现在我想知道是否有一种方法可以将CSS应用于前2 <a>和不同的Css（{1}}

<a>

CSS：

<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仅应用于Div。

中的前2

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

感谢您的帮助。：）

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

Answer 2

您可以使用CSS类，如下所示：

<div id="contain">
                    <div style="margin-top:15px;margin-bottom:15px;"> 
                    <a href="#"  id="A" class="specialLink">A</a>
                    <a href="#"  id="B" class="specialLink">B</a> 
                    <a href="#"  id="C">C</a>
         </div>           
</div>

然后，在你的CSS中，你做：

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

＆＃34; .specialLink＆＃34; part使得只有具有该类的元素才能获得该样式。

Answer 3

第一行将css应用于前两个a，最后一个适用于标记

$('#contain').find('a').css('some property');
$('#contain').find('a:last').css('some property');

Answer 4

如果必须将css设置为某些项目，请使用此代码

$(document).ready(function() {
    var iterations = 0;
    var countOfItems = 2; // how many <a> you need to change
    $('div#contain').find('a').each(function(){
        $(this).css({ "margin":"10px 20px 10px 20px", "text-decoration":"none" , "display":"inline-block"});
        iterations ++;
        if(iterations == countOfItems)
            return false;
    });
});

Answer 5

只需使用ID选择器：

#A { ... }

<强>更新

你可以像这样使用{3}的CSS3：

nth-child()

#contain a:nth-child(number) { css declarations; }是元素的索引。

有关number的详情，请参阅here。

Answer 6

你可以尝试 -

             <a href="#"  id="A" style="margin: 10px 20px 10px 20px; text-decoration: none; display: inline-block;">A</a>
             <a href="#"  id="B" style="margin: 10px 20px 10px 20px; text-decoration: none; display: inline-block;">B</a> 

             <a href="#"  id="C" style="different attributes which u want">C</a>

在特定<a> in a div</a>上应用CSS

6 个答案: