Code Analysis of Pseudo-class selectors and pseudo-element selectors in CSS

Source: Internet
Author: User

This article brings to you the content is about the CSS pseudo-class selector and pseudo-element selector introduction (with code), there is a certain reference value, the need for friends can refer to, I hope you have some help.

First, link pseudo-class

1. Link pseudo-Class

        /* Link pseudo-class *        /Note: Link,:visited,:target is acting on the link element!                : Link       represents all anchors as hyperlinks and points to an unreachable address                : Visited    represents all anchors as hyperlinks and points to an visited address                : Target     represents a special element, Its ID is the fragment identifier of the URI

2, code example:
01_ Anchor-point pseudo-class. html


02_ Anchor-point pseudo-class. html


03_target.html

Second, dynamic Pseudo-class

1. Dynamic Pseudo-Class

        /* Dynamic Pseudo class *        /Note: Hover,:active can be used for all elements!                : Hover      is suspended to the element                : active     means matching elements that are activated by the user (click and hold) Note: Because of the A tag: link and: Visited can override all a-label status, so when: link,: Visited,:hover,:active at the same time on a label body: Link and: Visited can not put in the last!!!

2, code example:

    

Third, privacy and: visited selector

1, privacy and: visited selector

/* Privacy with: visited selector * * Only the following properties can be applied to the visited link:    color  background-color  border-color

Iv. Forms related pseudo-class

1. Form related Pseudo-class

    /* Form related pseudo-class *    /: Enabled    matches an editable form        :d isable    matches a disabled form        : Checked matches the    selected form        : Focus      Match a form that has been burnt

2, code example:
01_ form status. html


02_ form status. html


03_ gets the focus. html


04_ analog Radio box. HTML

Iv. Structural pseudo-class

1. Structural pseudo-Class

/* Structural pseudo-class */index values starting from 1!!!! Index can be a variable n (only n) index can be even odd    #wrap ele:nth-child (index) to indicate that the child      element of index in the #wrap must be ele    #wrap Ele:nth-of-type (index)    that matches the Ele child element of index #wrap in    addition: Nth-child and: Nth-of-type There is a very important difference!!            Nth-of-type with elements as the center!!! : Nth-child (Index) series             : First-child    : Last-child    : Nth-last-child (Index)    : Only-child (equivalent to: First-child:last-child or: Nth-child (1): Nth-last-child (1)): Nth-of-type (Index) series    : First-of-type    : Last-of-type    : Nth-last-type (Index)    : Only-of-type   (equivalent to: First-of-type:last-of-type or: Nth-of-type ( 1): Nth-last-of-type (1):        not: Empty (the content must be empty, there is no space, there is attr OK)

2, code example:

04_not.html

05_empty.html


Five, pseudo-elements

1. Pseudo-Elements

/* Pseudo element *    /:: After    :: Before    :: Firstletter    :: Firstline    :: Selection

2, code example:
After.html


Before.html


Firstletter.html


Firstline.html


Selection.html

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.