When <p> encounters a problem with first-child

multiple layers

are nested with each other, and then use the p:first-child selector, which cannot be selected correctly. Code:

<body>
    

111

222

333

</body>

use p:first-child {color:red;} at this time, only 111turns red, why not all numbers turn red?

I try to change all

to or

or , and then switch to the corresponding selector, all the numbers will turn red.

as far as I understand p:first-child , tags that can be selected must meet two conditions:

  1. element name is p (nonsense)
  2. this p is the first child element (regardless of which parent element is)

is it that I misunderstand the pseudo-class : first-child , or is it a unique reason for

that all numbers cannot turn red?


the subject asked an interesting question.

after a little experiment, it is easy to get it from the DOM structure:

such a structure will be parsed by the browser as:

// p:first-child

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bef7f1-31c89.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bef7f1-31c89.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?