javascript - Problème d'exploration de la page Web du premier enfant du sélecteur Jquery

Question

Lors de l'exploration d'un site Web,
J'ai l'impression que h2 et h3 ont la même structure. Pourquoi h2:first-child peut obtenir des données, mais pas h3.

Les résultats finaux h2_1 et h2_2 sont les mêmes, pas de problème.
h3_1 est ok, h3_2 est vide, pourquoi ?

Le code est le suivant,

const jsdom = require('jsdom');

const jquery = require('jquery');

jsdom.env('https://www.osram.com/os/news-and-events/spotlights/index.jsp', [], {
    defaultEncoding: 'utf-8'
}, function(err, window) {
    if(err) {
        console.error('error get news url from page [%s]');
        return;
    }

    let $ = jquery(window);

    let el = $('p.col-xs-6.col-sm-7.colalign:first');


    let h2_1 = $(el).find('h2.font-headline-teaser').text();
    console.log('h2_1=' + h2_1);
    let h2_2 = $(el).find('h2.font-headline-teaser:first-child').text();
    console.log('h2_2=' + h2_2);

    let h3_1 = $(el).find('h3.font-sub-headline').text();
    console.log('h3_1=' + h3_1);

    let h3_2 = $(el).find('h3.font-sub-headline:first-child').text();
    console.log('h3_2=' + h3_2);



    window.close();


});

Answer 1

Le sélecteur xxx:first-child signifie que lorsque le premier élément enfant de l'élément parent de xxx est xxx, pour sélectionner xxx, ces deux conditions doivent être remplies en même temps.

n'est pas le premier élément enfant de l'élément parent de xxx, ni le premier xxx parmi les éléments enfants de l'élément parent de xxx

Le premier élément enfant de l'élément parent de

h2.font-headline-teaser est h2.font-headline-teaser, il peut donc être sélectionné

Le premier élément enfant de l'élément parent de h3.font-sub-headline n'est pas h3.font-sub-headline, il est donc vide