- Pseudo class selector Rollup
There are 4 pseudo-class selectors, structural pseudo-class \ui pseudo class \ Dynamic pseudo class and other pseudo class. Specific as follows
- structural pseudo-class selector structural pseudo-class selector
It is able to select elements based on the position of the element in the document, which has a prefix ":"
1. The root element selector acts only on the bottom label such as HTML. Rarely used. : Root
2. Child Element Selector Sub-element Select all and be more detailed
Ul>li:first-child{} Add pseudo-Class First-child first
ul>li:last-child{} Add pseudo-class last-child last
Ul>li:o nly-child{} adds pseudo-class only-child those only one, affects this only child
div>p:only-of type{} Add pseudo-class Only-of-type Select the element of the specified type, in fact the function and the div& alone Gt;p similar to
The pseudo-class needs to be preceded by a selector to restrict the scope
3. Ul>li: Nth-child (2) The second child element of Li under {} ul
Ul>li:nth-last-child (2) {} .... Countdown second
Other:
- UI pseudo-Class selector
: Enable
:d isable
HTML file
CSS file
Effect
: Checked Check the effective
HTML file
CSS file
will be checked to hide them
:d efault default, rarely used
CSS file
: Effective when valid valid
: Effective when invalid is not valid
HTML file
CSS file
By filling in the numbers, it turns green.
: Required required part is in effect
Optional is not required to enter into force
HTML file
CSS file
CSS pseudo Class (lower) structural pseudo class \ui pseudo class \ Dynamic pseudo class and other pseudo class valid check Enable child required link visit