97人人爱人人,久久大蕉香蕉免费,国产做受高潮69

本文介紹了nth-child 中奇數/偶數子元素的問題的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！

問題描述

我有一個這樣的網站:

<html xmlns="http://www.w3.org/1999/xhtml"><頭><標題></標題><link rel="stylesheet" type="text/css" href="article_style.css"/></頭><身體><div 類="節"><!--<h1>標題</h1>-->段落</div>段落</div>段落</div></div><div 類="節">段落</div>段落</div>段落</div></div></身體></html>

這是 CSS:

div.section{邊框:1px純黑色；}div.section div:nth-child(偶數){顏色:綠色；}div.section div:nth-child(奇數){紅色;}

結果如下:

這沒關系，因為在 each 部分中，奇數 div 為紅色，偶數為綠色.但是當我在第一部分的開頭添加標題時(示例中的注釋代碼)我得到了這個:

我不想那樣.我希望像以前一樣，但只是在第一部分有一個標題.所以首先是標題，然后是紅色段落.

解決方案

使用 nth-of-type 改為:

現場演示

div.section{邊框:1px純黑色；}div.section div:nth-of-type(偶數){顏色:綠色；}div.section div:nth-of-type(奇數){紅色;}

I have a web site like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="article_style.css" />
</head>
<body>
    <div class="section">
    <!--<h1>header</h1>-->
        <div>
            paragraph
        </div>
        <div>
            paragraph
        </div>
        <div>
            paragraph
        </div>
    </div>
    <div class="section">
        <div>
            paragraph
        </div>
        <div>
            paragraph
        </div>
        <div>
            paragraph
        </div>
    </div>
</body>
</html>

and this is CSS:

div.section
{
    border: 1px solid black;
}
div.section div:nth-child(even)
{
    color: Green;
}
div.section div:nth-child(odd)
{
    color: Red;
}

And this is the result:

This is OK because I get red for odd div and green for even in each section. But when I add header at the begginig of first section (commented code in sample) I get this:

I don't want that. I want the to have like before, but just with a header in first section. So at first header and then red paragraph.

解決方案

Use nth-of-type instead:

Live Demo

div.section
{
    border: 1px solid black;
}
div.section div:nth-of-type(even)
{
    color: Green;
}
div.section div:nth-of-type(odd)
{
    color: Red;
}

這篇關于nth-child 中奇數/偶數子元素的問題的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！

nth-child 中奇數/偶數子元素的問題

問題描述

相關文檔推薦