Summary of pseudo-class selectors

Summary of pseudo-class selectors

There are 4 types of pseudo-class selectors, structural pseudo-classes\UI pseudo-classes\dynamic pseudo-classes and other pseudo-classes. The details are as follows

1. Structural pseudo-class selector Structural pseudo-class selector
   It can select elements based on their position in the document. Such elements have a prefix ":"
   1 . The root element selector only works on bottom tags such as html. It is rarely used..

   :root

                                                                                                                   The selection of all child elements needs to be more detailed. last-child The last one

   ul>li:only-child{ } Add the pseudo-class only-child Those with only one will affect the only child
   div>p: only-of type{ } Add the pseudo-class only-of-type to select the child element of the specified type. In fact, the function is similar to that of a single div>p

   

   ##Pseudo-classes need to add pre-selectors to limit the scope

   

   3. ul>li :nth-child(2) { }   The second child element of li under ul

   ul>li:nth-last-child(2) { } …. The penultimate one

   Others:
   ##UI pseudo-class selector
   :enable
   :disable

   

html file
2. css file

   effect

   
   

   :checked The checked one takes effect

   html file

   ##css file

Hide the checked ones

:default The default takes effect, rarely used

css file

:valid Valid when legal

:invalid Valid when illegal

html file

css file

If you fill in the correct number, it will turn green.

:required The required part will take effect

optional No Required to take effect

html file            

css file

a:link Acts on the text between a tags

input:focus

Switch Text input cursor, input box changes color

Other pseudo-class selectors

:not Inverse selection focuses on

Hyperlinks that do not contain baidu are red

:empty The effect is empty tags, a bit Like word's replacement of spaces means

html file

before replacement

css file

If you want not to affect some empty parts, you can specify such as

p:empty{ } Then the css will only affect Empty tag under p

After replacement

:lang

: target Positioning anchor point within the page, a certain position will take effect immediately

name or id Yes, the anchor can be set in any tag. As for the hyperlink , it is just a hyperlink. Here, enter #anchor name directly in the browser, and the effect is to press href The same after that.

##When testing, add "# anchor name" at the end

Effect (Actually, the anchor points are mostly on some very long pages, and they can be positioned at one point. And the edges turn red.)

 

The above is the detailed content of Summary of pseudo-class selectors. For more information, please follow other related articles on the PHP Chinese website!