如何使用CSS类在第一个，第二个或第三个html元素中选择子元素? [英] How to select child element inside first, second or third html element with CSS classes?

问题描述

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

I want to select anchor tags in CSS.For the purpose in the following html document I did the same.

我的html文档在这里:

My html document is here:

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

现在，我要选择所有标签.我以这种方式尝试过:

Now I want to select all of a tags. I tried in this way:

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

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

But I am getting wrong result what should I do?

推荐答案

您的< a> 元素不是相邻的兄弟姐妹(或根本不是兄弟姐妹)，因此相邻的兄弟姐妹选择器(+ )不适用于他们.

Your <a> elements are not adjacent siblings (or siblings at all), so the adjacent sibling selector (+) doesn't apply to them.

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

您无需使用，也不需要使用此类.

You aren't using, and don't need to use, classes for this.

这篇关于如何使用CSS类在第一个，第二个或第三个html元素中选择子元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！