Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "what is the new pseudo-class selector in css3". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Add pseudo-class selector: 1, ": root", match the document's root element; 2, ": first-child", match the first child of the parent element; 3, ": last-child", match the last child of the parent element; 4, ": empty", match the empty element; 5, ": target", and so on.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The role of pseudo-class selectors: make further restrictions on existing selectors and further filter elements that existing selectors can match. The pseudo-class selectors provided by CSS 3 are mainly divided into the following three categories:

Structural pseudo-class selector

UI element state pseudo-class selector

Other pseudo-class selector

1. Structural pseudo-class selector

: root: matches the root element of the document. In an HTML document, the root element is always the element.

: first-child: an element that matches the selector and must be the first child of its parent element.

: last-child: an element that matches the selector and must be the last child of its parent element.

: nth-child (n): matches the selector and must be the element of the nth child node of its parent.

: nth-last-child (n): matches the selector and must be the element of the penultimate child node of its parent element.

: only-child: an element that matches the selector and must be the only child of its parent element.

: first-of-type: matches the selector and is the first of its sibling elements of the same type and level.

: last-of-type: matches the selector and is the last element of its sibling element of the same type and level.

: nth-of-type (n): matches the selector and is the nth element of its sibling element of the same type and level.

: nth-last-of-type (n): matches the selector and is the last but one of its sibling elements of the same type and level.

: only-of-type: matches the selector and is the only sibling element of the same type and level.

: empty: matches elements that match the selector and do not have any child elements (including text nodes) inside them.

: lang (lang): matches the selector and the content is a language-specific element.

For: nth-child and: nth-last-child pseudo-class selectors, the following usage is also supported.

: nth-child (odd/event): matches the selector and must be an element with odd / even child nodes of its parent element

: nth-last-child (odd/event): matches the selector and must be an element with odd / even child nodes of its parent element

: nth-child (xn y): matches the selector and must be the element of the xny child node of its parent element

: nth-last-child (xn y): matches the selector and must be the element of the xny child node of its parent element

An example of using: nth-last-child pseudo-class selector is as follows:

Child / * defines the CSS style * / li:nth-last-child (3n+1) {background-color: # FFC0CB;} Java lightweight Java EE Ajax XML Classic Java EE Android that works on the li element of the penultimate (1, 4, 7) child node of its parent element

The results are as follows:

2. UI element status pseudo-class selector

The UI element state pseudo-class selector contains:

: enabled: matches all available elements in the user interface (form form)

: disabled: matches all elements in the user interface (form form) that are not available

: checked: matches all selected elements in the user interface (form form)

:: selection (the selector is preceded by two colons): matches the part of the element that is selected or highlighted by the user

3. Other pseudo-class selectors

3.1:target pseudo-class selector (matches elements that match the selector and must be a named anchor target)

Requires that the element must be the target of the named anchor and must be the target currently being accessed. Its function is that the page can highlight the target being accessed through this selector. The following demonstrates the use of the target selector (this code is the sample code in the "Crazy HTML 5 CSS 3 JavaScript handout")

: target: target {background-color: # ff0;} Crazy Java handout | lightweight Java EE Enterprise Application practice | Crazy Android handout | Classic Java EE Enterprise Application practice

Crazy Java handout

This book introduces all aspects of the Java language in detail.

Lightweight Java EE Enterprise Application practice

This book introduces in detail the knowledge of the integrated development of Struts 2, Spring 3 and Hibernate.

Crazy Android handout

This book introduces the knowledge of Android application development in detail.

Classic Java EE Enterprise Application practice

This book introduces in detail the knowledge related to JSF, EJB 3, JPA and other Java EE.

3.2:not pseudo-class selector (matches elements that match 1 selector but not 2 selector, equivalent to 1 minus 2)

The following page code demonstrates the use of the not selector:

: not li:not (# ajax) {color: # 999; font-weight: bold Crazy Java handout lightweight Java EE enterprise application practice crazy Ajax handout crazy XML handout crazy Android handout

As you can see from the running results, all elements except id with ajax have their fonts set to the color indicated by # 999 and the fonts are shown in bold.

This is the end of the content of "what is the new pseudo-class selector in css3". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.