How to select child element inside first, second or third html element with CSS classes?

问题:

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

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?

回答1:

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

The div elements are siblings.

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.

回答2:

You can easily select like this :

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

For modern browsers, use a:nth-child(2) for the second a, and a:nth-child(3) for the third.

Hope this helped.

回答3:

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

回答4:

You don't really need any classes for this, you can just use the :nth-child(n)-selector for this (see this for refrence.)

Also there is no need to use the body selector before (to declare that the body is a parent-element of the a). The body is the parent-element of every visible element of the page, so adding this into the selector hierarchy doesn't make much sense.

However if you want to use your already existing classes, you can do the following:

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

回答5:

body a { //your rules here } 

This will select all anchor tags in your site.

回答6:

Just target the anchor directly:

a {     color: pink; } 

To set the styles for hover and visited:

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

---

Aside: it seems you need to learn basic CSS. I suggest "CSS Diner" at http://flukeout.github.io/ might be a good exercise.

回答7:

use association to your div class elements

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

文章来源: How to select child element inside first, second or third html element with CSS classes?