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

Today, I would like to share with you how css distinguishes between pseudo-classes and pseudo-elements, detailed content and clear logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

one。 Pseudo class (used to add special effects to some selectors)

The purpose of pseudo-classes is to find information that does not exist in the DOM tree and cannot be obtained by conventional CSS selectors through selectors. The pseudo-class begins with a colon, followed by the name of the pseudo-class and the optional parameters contained in parentheses. Any regular selector can use pseudo classes anywhere. Pseudo-class syntax is not case-sensitive. Some pseudo-classes are mutually exclusive, while others can be used by the same element at the same time. Moreover, in order to meet the DOM structural changes caused by users when operating DOM, pseudo-classes can also be dynamic.

There are two kinds of pseudo classes: state pseudo class and structural pseudo class.

The state pseudo-class is selected based on the current state of the element. The state of the element changes dynamically during interaction with the user, so the element presents different styles according to its state. When an element is in one state, the style is rendered, and when you enter another state, the style is lost. Common status pseudo-classes mainly include:

Link is applied to links that have not been accessed

: hover is applied to the element that the mouse hovers over

Active is applied to the activated element

: visited applies to visited links and is mutually exclusive with: link.

Focus is applied to elements that have keyboard input focus

Structural pseudo-class is a new selector for css3, which uses dom tree to filter elements and match elements through the interrelation of document structure, which can reduce the definition of class and id attributes and make the document structure more concise. Common ones include:

First-child selects the first child of an element

: last-child selects the last child of an element

: nth-child () selects one or more specific child elements of an element

: nth-last-child () selects one or more specific child elements of an element, starting with the last child element of that element

: nth-of-type () selects the specified element

: nth-last-of-type () selects the specified element, starting with the last element

First-of-type selects the first child element of the same class under a parent element

Last-of-type selects the last child of the same class of a parent element

The element selected by only-child is the only child of its parent element

Only-of-type selects an element that is the only child element of its parent element of the same type

There is nothing in the element selected by empty.

Example:

Pseudo class

.demo {

Width:200px

Height:500px

Margin:50pxauto

Text-align:center

}

.tab _ content {

Height:50px

Background:red

Margin-bottom:10px

}

# tab1:target,#tab2:target,#tab3:target {

Background:blue

Line-height:50px

}

Label one

Label two

Label three

Tab1

Tab2

Tab3

These are all the contents of the article "how css distinguishes pseudo classes from pseudo elements". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.