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

This article mainly explains "how to use the css3 hierarchical selector". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use the css3 hierarchical selector.

Usage: 1, descendant selector selection element descendant element, syntax "element {css code}"; 2, child selector select all child elements of the element, syntax "element > element {css code}"; 3, adjacent sibling selector selects the next element in the same level directory of the element; 4, general sibling selector selects all subsequent tags under the element sibling directory.

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

What is the use of the css3 hierarchical selector

The hierarchical selector acquires elements through the hierarchical relationship between the DOM elements of HTML. The main hierarchical relationships include offspring, father and son, neighboring brothers and universal brothers, through which the desired elements can be easily and quickly selected. The syntax of the hierarchical selector is as follows:

The selector type function describes that the E F descendant selector (including selector) selects the matching F element, and the matching F element is contained in the matching E element E > F sub-selector selects the matching F element. and the matching F element teacher matches the child element of the E element E + F neighboring sibling selector selects the matching F element And the matching F element is located immediately after the matching E element E ~ F universal selector selects the matching F element, and all matching F elements are located after the matching E element.

IE7 and above browsers, including other browsers, support hierarchical selectors. (not supported by IE6)

The following is an HTML file to illustrate the use of various hierarchical selectors:

Use the CSS3 hierarchy selector * {margin: 0; padding: 0} body {width: 300px; margin: 0 auto;} p {margin: 5pxscape padding: 5pxborder: 1px solid # ccc;}

one

two

three

four

five

six

seven

eight

nine

ten

The display effect is as follows:

Its DOM tree structure is as follows:

Descendant selector:

The descendant selector (EF), also known as the inclusion selector, is used to select the descendant elements of an element. For example, "E F", E is the ancestor element, F is the descendant element, which means all descendants of the E element F element, where the F element, whether it is a child element of E, a grandchild element, or a deeper relationship, will be selected.

In other words, no matter how many levels F has in E, the F element will be selected.

Let's use the descendant selector to change its background color, adding the following style at the end of the CSS code of the above HTML element:

P p {background: orange}

The display effect is as follows:

Sub-selector:

The child selector intelligently selects the child elements of an element, where E is the parent element and F is the child element, where E > F indicates that all child elements F under the E element are selected. This is different from the descendant selector. In the descendant selector, F is the descendant of E, while in E > F, F is only a child of E.

The following code is used to change the background color of the child element p under body:

Body > p {background:green;}

The display effect is as follows:

Neighboring sibling selector:

The neighboring sibling selector can select elements immediately after another element, which have the same parent element. In other words, E and F are sibling elements, and F elements follow E elements and are adjacent to each other.

The following code is used to change the background color of the neighboring sibling element of the p element whose class is active. For convenience, add the class attribute to the first p element of the above HTML element, as follows:

one

Then add the following style at the end of its CSS code:

.active + p {background:lime}

The display effect is as follows:

Universal Brother Selector:

Used to select all sibling elements after an element, which are similar to adjacent sibling element selectors and need to be in the same parent element, that is, E element and F element are sibling elements, and F element comes after E element.

Add the following styles at the end of the CSS code for the above HTML:

.active ~ p {background:red;}

The display effect is as follows:

At this point, I believe you have a deeper understanding of "how to use the css3 level selector". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.