如何使用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元素中的子元素？

回答

相關問題