CSS pseudo-class selector and CSS pseudo-class selector

CSS pseudo-class selector and CSS pseudo-class selector

# CSS pseudo-class selector


# Notes for using the css pseudo-class selector

When using the pseudo-class selector of css to select an element, pay special attention to ''': first-child ''' and ''': nth-child (n),
Web page rendering is read from the end of the statement, that is, a pseudo-class selector like '''p: first-child, it refers to "the item where a certain element uses p as the first subitem", rather than "the first subitem of p", because, in fact, before p, the characters xxx & nbsp; are omitted, which leads to misunderstanding.

E.g.

Div p: first-child {color: red ;}

<Div>

& Lt; h1 & gt; 111 & lt;/h1 & gt;

<P> 222 </p>

<P> 333 </p>

</Div>


The 222 character here will not become red, because it is not the element of the div element whose p element is the first subitem. In this example, the div element uses the p element as the first subitem, and no element meets this condition. The h1 element does not respond to the color: red.


# How to remove the last element with a border using the css pseudo-class selector

If there is a vertical line between each element when designing a navigation bar, the pseudo-class selector can easily remove the right frame line of the last li element.

Li {
Border-right: 1px red solid;
}
Ul li: last-child {
Border-right: none;
}

You can remove the rightmost, that is, the last li with a border line, without the need to name the last li.