Shulou(Shulou.com)06/01 Report--

This article mainly introduces the common pseudo-classes and pseudo-elements in HTML what is the difference between the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that you read this HTML common pseudo-classes and pseudo-elements what the difference between the article will have a harvest, let's take a look at it.

When it comes to pseudo-classes, the most commonly used ones in people's impression are: hover,: active,: link,: visited, and the common pseudo-class selectors in css3: last-child,: first-child, nth-child (n), and so on!

The definitions of pseudo classes and elements on W3C are:

Pseudo classes: pseudo classes are used to add special effects to some selectors. Pseudo elements: pseudo elements are used to add special effects to some selectors

In order to make clear the difference between pseudo-classes and pseudo-elements, css3 has made it clear that single colons (:) are used for CSS3 pseudo-classes, and double colons (::) are used for CSS3 pseudo-elements.

Span:hover / / pseudo class

Span::before / / pseudo element

However, in order to ensure compatibility, pseudo elements still generally use single quotation marks. Next, I will introduce you in the form of single quotation marks.

Common pseudo classes (pseudo-classes) and pseudo elements (pseudo-elements)

The difference between common pseudo-classes and pseudo-elements in HTML

Compatibility of pseudo elements

Chrome 2 +

Firefox 3.5 + (3.0 had partial support)

Safari 1.3 +

Opera 9.2 +

IE8+ (with some minor bugs)

Almost all mobile browsers.

Pseudo elements: definition and basic usage of before and: after

Definition:

The before selector inserts content before the contents of the selected element.

The after selector inserts content after the contents of the selected element.

Use:

Use the content property to specify what to insert. Content has several useful values: [String]-including a string in quotation marks will add a string to the content of the element. Example:

A:after {content: "↗";}

Attr ()-calls the attributes of the current element to easily display the Alt prompt text of the picture or the Href address of the link. Example:

A:after {content: "(" attr (href) ");}

Url () / uri ()-used to reference media files.

Example:

H2::before {content: url (logo.png);}

Counter ()-invokes the counter, which allows you to implement the ordinal function without using list elements.

Example:

H3:before {counter-increment: chapter; content: "Chapter" counter (chapter) "."}

This is the end of the article on "what is the difference between common pseudo-classes and pseudo-elements in HTML". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what is the difference between common pseudo classes and pseudo elements in HTML". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.