如何使用CSS类选择第一，第二或第三个html元素中的子元素？

我想在CSS中选择锚标签。为了在以下html文档中的目的，我做了同样的事情。如何使用CSS类选择第一，第二或第三个html元素中的子元素？

我的html文件是在这里：

</head> 
    <body> 
     <div class="first"> 
      <center> <a href="http://www.google.com">The first link </a></center> 
     </div> 

     <div class="second"> 
      <center> <a href="http://www.fb.com"> The second link </a></center> 
     </div> 

     <div class="third"> 
      <center> <a href="http://www.stackoverflow.com"> The third link  </a></center> 
     </div>  
    </body>

现在我要选择全部标记。我试过这样：

body a:first-child:hover//The first child 
{ 
    font-size:30px; 
    color:yellow; 
} 
body a+a:hover //the second child 
{ 
    font-size:40px; 
    color:red; 
} 
body a+a+a:hover //the third child 
{ 
    font-size:50px; 
    color:#fff; 
}

但是我得到错误的结果我该怎么办？

来源

2014-04-04 jahan

你为什么不使用IDS？ – FabioG

Sitenote：不要使用''

''，因为它是[非相容功能]（http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming -features）在HTML 5中使用''div {text-align：center; }''而不是在你的CSS –

@Asenar我正在写我自己的代码:) – jahan

你<a>元素不相邻的兄弟姐妹（或兄弟姐妹的话），所以相邻的兄弟选择器（+）不适用于他们。

div元素是兄弟姐妹。

body div:first-child a:hover//The first child 
{ 
    font-size:30px; 
    color:yellow; 
} 
body div+div a:hover //the second child 
{ 
    font-size:40px; 
    color:red; 
} 
body div+div+div a:hover //the third child 
{ 
    font-size:50px; 
    color:#fff; 
}

您没有使用，也不需要使用类。

来源

2014-04-04 10:13:06 Quentin

哪一个更好的解决方案？ – jahan

我试过了你所描述的那个，它正在工作。 – jahan

body a { 
//your rules here 
}

这将选择您网站中的所有锚定标记。

来源

2014-04-04 10:12:29 Ermir

只是直接针对锚：

a { 
    color: pink; 
}

要设置悬停的样式，并参观：

a:focus, 
a:hover { 
    color: green; 
} 

a:visited { 
    color: blue; 
}

旁白：看来你需要学习基本的CSS。我建议在的“CSS晚餐”可能是一个很好的练习。

来源

2014-04-04 10:12:45 ANeves

你并不真的需要这方面的任何类，你可以只使用:nth-child(n) -selector这个（见this做参考。）

也没有必要使用前体选择器（申报身体是a）的父元素。正文是页面每个可见元素的父元素，因此将其添加到选择器层次结构中并没有多大意义。

但是，如果你想使用你现有的类，你可以做到以下几点：

.first a:hover 
{ 
    font-size:30px; 
    color:yellow; 
}  
.second a:hover 
{ 
    font-size:40px; 
    color:red; 
} 
.third a:hover 
{ 
    font-size:50px; 
    color:#fff; 
}

来源

2014-04-04 10:12:57 Padarom

标记中的'a'元素是*全部*：“第一个孩子”。你的'：n-child'代码将不起作用。 – Quentin

.first{ 
font-size:30px; 
color:yellow; 
} 
.first a:hover{ 
    font-size:40px; 
    color:red; 
} 
.second a:hover{ 
font-size:40px; 
color:red; 
} 
.third a:hover{ 
    font-size:50px; 
    color:#fff; 
}

来源

2014-04-04 10:13:59 Aminesrine

您可以轻松地选择这样的：

.first a:first-child:hover//The first child 
{ 
    font-size:30px; 
    color:yellow; 
} 
.second a:nth-child(2):hover //the second child 
{ 
    font-size:40px; 
    color:red; 
} 
.third a:nth-child(3):hover //the third child 
{ 
    font-size:50px; 
    color:#fff; 
}

对于现代的浏览器，使用a:nth-child(2)第二一个，并a:nth-child(3)第三。

希望这有助于。

来源

2014-04-04 10:14:35 Farzad

td：nth-child ???? – jahan

@jahan抱歉，只是错误，我编辑了答案。再检查一遍。 – Farzad

我无法得到“请记住，这些检索每行的第二个和第三个TD。” – jahan

使用联想到你的divclass元素

.first a:hover//The first child 
{ 
    font-size:30px; 
    color:yellow; 
} 
.second a:hover //the second child 
{ 
    font-size:40px; 
    color:red; 
} 
.third a:hover //the third child 
{ 
    font-size:50px; 
    color:#fff; 
}

来源

2014-04-04 10:15:43 FabioG

如何使用CSS类选择第一，第二或第三个html元素中的子元素？

回答

相关问题