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

Question

我想在 CSS 中选择 anchor 标记。出于以下 html 文档的目的，我做了同样的事情。

我的 html 文档在这里:

<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 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;
}

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

Answer 1

你的 <a>元素不是相邻的 sibling (或根本不是 sibling )，因此相邻的 sibling 选择器 ( + ) 不适用于它们。

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;
}

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