": ਨੌਵੀਂ-ਬੱਚਾ", ": ਪਹਿਲੇ-ਬੱਚੇ" ਅਤੇ ": ਪਹਿਲੇ ਕਿਸਮ ਦਾ" ਸੀਐਸਐਸ ਵਿੱਚ ਅੰਤਰ

ਹਵਾਲਾ

ਵਿਸਤ੍ਰਿਤ ਵਿਆਖਿਆ

ਪਹਿਲਾਂ, ਆਓ ਆਪਾਂ ਹੇਠਾਂ ਦਿੱਤੇ HTML ਨਮੂਨੇ ਦੇ ਕੋਡ ਨੂੰ ਵੇਖੀਏ, ਇਸ ਕੋਡ ਦੇ ਜ਼ਰੀਏ ਅਸੀਂ ਤਿੰਨ ਚੋਣਕਾਰਾਂ ਦੀ ਇਕ-ਇਕ ਕਰਕੇ ਵਰਤੋਂ ਸਮਝਾਂਗੇ.

            <div id="divMain">
    <div>
        <p id="p1">p1</p>
        <div id="div1">div1</div>
        <p id="p2">p2</p>
    </div>
    <p id="p3">p3</p>
    <div id="div2">div2<div>
</div>
<style>
/*css1*/
#divMain div:nth-child(2) {
    color: blue;
}
/*css2*/
#divMain p:first-child {
    color: red;
}
/*css3*/
#divMain p:first-of-type {
    background-color: blue;
}
</style>
        

": ਨੌਵਾਂ ਬੱਚਾ" ਨੇ ਵਿਸਥਾਰ ਨਾਲ ਦੱਸਿਆ

ਉਪਰੋਕਤ ਕੋਡ ਵਿੱਚ CSS1 ਦਾ ਅਰਥ ਦੂਜਾ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਹੈ ਅਤੇ ਕਿਸਮ "Div" ਹੈ, ਇਸ ਲਈ ਸਿਰਫ Div1 ਚੁਣਿਆ ਗਿਆ ਹੈ. Div1 ਪੇਰੈਂਟ ਕੰਟੇਨਰ ਵਿੱਚ ਦੂਜਾ ਬੱਚੇ ਦਾ ਤੱਤ ਹੈ ਅਤੇ ਕਿਸਮ "div" ਹੈ. p3 ਪੇਰੈਂਟ ਕੰਟੇਨਰ ਦਾ ਦੂਜਾ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਹੈ, ਪਰ ਇਹ "ਡਿਵ" ਟਾਈਪ ਦੀ ਨਹੀਂ ਹੈ ਇਸ ਲਈ ਇਹ ਚੁਣੀ ਨਹੀਂ ਗਈ ਹੈ. ਜੇ ਅਸੀਂ ਚੋਣਕਾਰ ਦੇ ਸਾਹਮਣੇ ਡਿਵ ਨੂੰ ਹਟਾਉਣ ਲਈ ਸ਼ੈਲੀ ਨੂੰ ਸੋਧਦੇ ਹਾਂ, ਤਾਂ p3 ਵੀ ਚੁਣਿਆ ਜਾਵੇਗਾ.

": ਪਹਿਲੇ ਬੱਚੇ" ਨੇ ਵਿਸਥਾਰ ਨਾਲ ਦੱਸਿਆ

ਉਪਰੋਕਤ ਕੋਡ ਵਿੱਚ ਸੀਐਸ 2 ਦਾ ਅਰਥ ਪਹਿਲੇ ਬੱਚੇ ਦਾ ਤੱਤ ਹੈ ਅਤੇ ਕਿਸਮ ਪੀ ਹੈ, ਇਸ ਲਈ ਸਿਰਫ p1 ਚੁਣਿਆ ਗਿਆ ਹੈ. p1 ਪੇਰੈਂਟ ਕੰਟੇਨਰ ਵਿੱਚ ਪਹਿਲਾ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਹੈ ਅਤੇ ਕਿਸਮ "p" ਹੈ. ਉਪਰੋਕਤ ": ਨੌਵੀਂ-ਬੱਚਾ" ਨਾਲ ਇਸਦਾ ਇਕੋ ਜਿਹਾ ਅਰਥ ਹੈ. ਜੇ ਤੁਸੀਂ ਪੈਰਾਮੀਟਰ 1 ਨੂੰ ਪਾਸ ਕਰਨ ਲਈ ": nth-child" ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਪ੍ਰਭਾਵ ਬਿਲਕੁਲ ਉਹੀ ਹੁੰਦਾ ਹੈ.

": ਪਹਿਲੀ ਕਿਸਮ ਦਾ" ਵਿਸਥਾਰ ਨਾਲ ਦੱਸਿਆ

ਉਪਰੋਕਤ ਕੋਡ ਵਿਚ css3 ਦਾ ਅਰਥ ਇਹ ਹੈ ਕਿ ਪਹਿਲੀ ਕਿਸਮ "ਪੀ" ਦਾ ਇਕ ਬਾਲ ਤੱਤ ਹੈ. ਉਪਰੋਕਤ ਦੋਵਾਂ ਚੋਣਕਾਰਾਂ ਵਿਚੋਂ ਇਥੇ ਅੰਤਰ ਇਹ ਹੈ ਕਿ ਸੰਬੰਧਿਤ ਕਿਸਮ ਪਹਿਲਾਂ ਮਿਲਦੀ ਹੈ, ਅਤੇ ਫਿਰ ਪਹਿਲਾ ਤੱਤ ਜੋ ਕਿਸਮ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ . ਇਸ ਲਈ ਚੁਣੇ ਹੋਏ ਪ 1 ਅਤੇ ਪੀ 3 ਹਨ. ਦੋਵੇਂ p1 ਅਤੇ p3 ਮੂਲ ਕੰਟੇਨਰ ਵਿੱਚ ਪਹਿਲੇ "p" ਤੱਤ ਹਨ.