The content of this paper is summarized from MDNCSS Selectors , To learn more, please check the original text .

What is a pseudo-class ？

Pseudo classes are added to selectors keyword , Specifies the special state of the element to be selected .

Typical pseudo class keywords

in the majority of cases , Pseudo classes are used with base selectors , More pseudo classes MDN - Standard pseudo class index

The following is the application of pseudo classes in some typical scenarios .

:hover

Pointer in <button> Hover up , But when it's not activated , The button color changes to blue

    button:hover {
      color: blue;
    }
 Copy code 

Be careful : On the touch screen  :hover  Basically not available . On different browsers :hover  Behave differently . Web developers should not allow any content to be displayed only by hovering , Otherwise, these contents are difficult or impossible for touch screen users to see .

:not

:not()  Used to match elements that do not match a set of selectors . Because its function is to prevent specific elements from being selected , It's also called Reverse selection of pseudo class （negation pseudo-class）.

Will all not <p> Change the color of the element to blue ：

    body:not(p) {
      color: blue;
    }
    
    /*  The following code has no effect  */
    :not(p) {
      color: blue;
    }
 Copy code 

Be careful : On the touch screen  :hover  Basically not available . On different browsers :hover  Behave differently . Web developers should not allow any content to be displayed only by hovering , Otherwise, these contents are difficult or impossible for touch screen users to see .

:first-child

To all <ul> Next first <li> Apply different styles

    ul li {
      color: blue;
    }
    ul li:first-child {
      color: red;
      font-weight: bold;
    }
 Copy code 

:active

:active It shows the time from pressing the mouse to releasing it , The following code indicates <a> Styles in different states .

    a:link { color: blue; }          /*  No access to the link  */
    a:visited { color: purple; }     /*  Visited link  */
    a:hover { background: yellow; }  /*  User mouse over  */
    a:active { color: red; }         /*  Activate Links  */
 Copy code 

Be careful : :active The style given may be overridden by other link related pseudo classes declared later . To ensure that the style is effective , Need to put  :active  The style of is placed after all link related styles .

This order of linking pseudo classes is called  LVHA The order ：:link > :visited > :hover > :active.

Pseudo class keywords used alone

Our common pseudo class keyword is characterized by a single colon : start , Follow the base selector .

But the pseudo class keyword used alone can also have an effect on the page , for example ：

adopt :focus pseudo-classes , You can change the color of any element to red after it gets the focus .

    :focus {
      color: red;
    }
 Copy code 

What are pseudo elements ？

The pseudo element is a Keywords appended to the end of the selector , Allows you to modify the style for a specific part of the selected element .

Same as pseudo class , Only one pseudo element can be used in a selector . however , The pseudo element must immediately follow the underlying selector in the statement .

for example , The following code can be given to each... In the page <a> Add an expression before the label .

    a::before {
      content: "";
    }
 Copy code 

Compared to pseudo classes , The use of pseudo elements is more fixed , Its basic grammar ：

    selector::pseudo-element {
      property: value;
    }
 Copy code 

Be careful : When writing pseudo elements , You'll see a single colon : Writing , But this is CSS2 Outdated Syntax , Only used to support IE8, In most cases, please write double colons :: To represent pseudo elements .

Pseudo classes and pseudo elements are used together

In the following case , Both pseudo classes and pseudo elements are used ：

use CSS Implement a switch style ,hover Trigger when , The slider is square , The specific size is optional , Here's the picture

Try to meet the following requirements , Can realize part of ：

1. The switch action is animated excessively （ Slider shift 、 Background color ）
2. Just one dom Element realization
3. The height of the switch is fixed , But the width is not fixed , That is, the width is the width of the unknown parent element 100%, The width is always greater than the height

Topic interpretation

Because only one DOM Elements , To distinguish between the different states of the slider and the background , So use pseudo elements ::before stay .box Add a slider inside , The sliding block adopts inline-block Way to show , And by the transition Property to specify the transition animation .

The background is also used transition To specify the transition animation , And both pass :hover Trigger .

Implementation code

HTML

    <div class="father">
      <div class="box"></div>
    </div>
 Copy code 

CSS

    .box {
      height: 50px;
      width: 100%;
      background-color: #c2d3e4;
      transition: background-color 0.25s
    }

    .box::before {
      content: "b";
      color: white;
      display: inline-block;
      background-color: white;
      position: relative;
      top: 5px;
      left: 5%;
      height: 40px;
      width: 35%;
      transition: left 0.25s;
    }

    .box:hover {
      background-color: #348fe4;
    }

    .box:hover::before {
      left: 60%;
    }
    
    /*  The width of the parent element is arbitrary  */
    .father {
      width: 100px;
    }
 Copy code 

code snippet