如何使用第n-的類型來選擇嵌套子

我想要的風格奇數和偶數的與內容相關的報頭。他們在幾個DIV內，我無法獲得第n個孩子或第n個類型的工作 - 只顯示奇怪的樣式。下面是一些概念代碼：如何使用第n-的類型來選擇嵌套子

HTML：

<div class="content"> 
<h2>Welcome to my blog</h2> 
<div class="post"> 
    <h2><a href="myPostLink">This is a post</a></h2> 
    <div class="entry"> 
     <p>here is some content</p> 
    </div> <!-- end entry --> 
    <div class="meta"><p>Here is meta info</p></div> 
</div> <!-- end post --> 

<div class="post"> 
    <h2><a href="myPostLink">This is another post</a></h2> 
    <div class="entry"> 
     <p>here is some more content</p> 
    </div> <!-- end entry --> 
    <div class="meta"><p>Here is meta info</p></div> 
</div> <!-- end post --> 
</div> <!-- end content -->

CSS：

.content h2 a:nth-of-type(odd){color: #444;} 
.content h2 a:nth-of-type(even){color: #ccc;}

jsfiddle

我的思維過程中，自從我開始在。內容在我的CSS中，第一。內容H 2的將被認爲是奇數和第二EV en等等。顯然不是這樣 - 他們都被認爲是第一個孩子。有沒有一種方法可以單獨用CSS來選擇標題？我在做些什麼愚蠢的事情？

感謝，

瑞奇

來源

2013-12-15 ricky

https://www.w3schools.com/Css/css_combinators.asp – Andrew

使用nth-child在.post元素，然後選擇從那裏

jsFiddle example

.post:nth-child(odd) h2 a { 
    color: red; 
} 
.post:nth-child(even) h2 a { 
    color: green; 
}

來源

2013-12-15 20:34:25

的h2元素試試這個

.content div.post:nth-of-type(odd) a{color: #444;} 
.content div.post:nth-of-type(even) a{color: #ccc;}

的與後級的奇數和偶數的div的元素。不太確定這是你需要的。工作示例：http://jsfiddle.net/a4j7z/

來源

2013-12-15 20:35:58 MaGnetas

如何使用第n-的類型來選擇嵌套子

回答

相關問題