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?

Html css-selector pseudo-class
Mar.23,2021

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

Previous: Why did the css animation disappear?

Next: AJAX sends json data PUT to request other domain problems.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu