CSS structure pseudo Class E: first-child/last-child/only-child/empty,

CSS structure pseudo Class E: first-child/last-child/only-child/empty,

E: first-child explanation: the first child element of E's parent element is exactly E. Define the style for E.

E: last-child explanation: the last sub-element of the parent element of E is exactly E. Define the style for this E.

E: only-child explanation: the parent element of E has only one child element. This is exactly E. Define the style for this E.

E: empty explanation: the E element does not have child elements or text content. Define a style for this E element.

 

 

Example: as long as the Eelement is the first child element of its parent. It must satisfy two conditions at the same time. One is "first child element" and the other is "This child element is exactly E ".

<Style> span: first-child {color: red;} p: first-child {color: blue ;} /* The first child element of the parent element of the p element is div rather than p, so this style does not work */I: first-child {color: orange ;} </style> <div class = "demo"> <div>. the first child element of demo is div </div> <! -- The First span element is the first span of its parent P element, the color turns red --> <p> <span> the first span </span> the first paragraph P <span> the second span </span> </p> <! -- The first I element is the first I of its parent a element, color changes to orange --> <p> one link <I> the first I element </I> </p> <! -- The second I element is the first I of its parent a element, color changes to orange --> <p> one link <I> the second I element </I> </p> <p> one link </p> </div>