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

我想在CSS中选择锚定标记。为了在下面的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 {
//your rules here
}

---

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

直接以锚定为目标：

a {
    color: pink;
}

要设置“悬停”和“已访问”的样式，请执行以下操作：

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

a:visited {
    color: blue;
}

---

---

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

您实际上不需要任何类来完成此操作，您可以使用

：nth child（n）

-选择器来完成此操作（请参阅以获取参考。）

此外，在之前也不需要使用body选择器（以声明body是a的父元素）。body是页面中每个可见元素的父元素，因此将其添加到选择器层次结构中没有多大意义

但是，如果要使用现有的类，可以执行以下操作：

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

您的

元素不是相邻的同级（或根本不是同级），因此相邻同级选择器（

+

）不适用于它们

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

---

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

您可以很容易地选择如下：

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

.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使用

a:n子级（2）

，第三个a使用

a:n子级（3）

---

希望这能有所帮助。

使用与

div

类

元素的关联

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

---

为什么不使用ids？站点注意：不要使用

，因为它是HTML5中的一种。在应用程序中使用

div{text align:center；}

CSS@Asenar我在写我自己的代码：）就像这里的大多数人一样，我想；）对不起，我提出了一个不太准确的建议title@jahan对不起，我弄错了，我已经编辑了答案。再次检查。我无法获得“记住，它们检索每行的第二个和第三个td。”标记中的

a

元素都是

：第一个子元素。您的
：第n个孩子的
代码不起作用。@昆汀当然问题的Css不正确，现在将得到修复，谢谢标记中的
a
元素都是
：第一个孩子的
。您的
：第n个子
代码不起作用。哪一个是更好的解决方案？
.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;
}