css - Nth-child में अजीब/यहां तक ​​कि बच्चे तत्वों के साथ समस्या



html css-selectors (2)

इसके बदले nth-of-type उपयोग करें:

लाइव डेमो

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

https://src-bin.com

मेरे पास इस तरह की एक वेब साइट है:

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

और यह सीएसएस है:

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

और यह परिणाम है:

ये ठीक है क्योंकि मुझे प्रत्येक अनुभाग में भी विषम डिवी और लाल रंग के लिए लाल मिलते हैं। लेकिन जब मैं पहले अनुभाग के बेगिनिग में शीर्ष लेख जोड़ता हूं (नमूना में टिप्पणी की गई कोड) मुझे यह मिलता है:

मुझे यह नहीं चाहिए मुझे पहले की तरह होना चाहिए, लेकिन पहले अनुभाग में शीर्षक के साथ। तो पहले शीर्ष पर और फिर लाल पैराग्राफ


Answer #1
div > :nth-child(3)     the third child of a div element
div > :nth-child(even)  every even child of a div element
div > :nth-child(odd)   every odd child of a div element
div > :nth-child(3n)    every third child of a div element




css-selectors