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

This article introduces the knowledge of "what level selector does css3 have". In the operation of actual cases, many people will encounter such a dilemma. Next, 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!

Belong to the css3 hierarchical selector: 1, descendant selector "E F", select all descendant F elements of E element; 2, child element selector "E > F", select all child elements under E element, and adjacent sibling element selector "Eternal F", and select element F 4 and sibling selector "Eternal F" immediately after E element.

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

Descendant selector (E F)

The descendant selector is also called the inclusion selector, and its function is to be able to select the descendant elements of an element, such as: e F, the front E is the ancestor element and F is the descendant element. it means that all the descendant F elements of the E element are selected. please note that they need to be separated by a space. Here F, whether it is a child or grandchild of element E, or a deeper relationship, will be selected, in other words, no matter how many layers of relationships F has in E, it will be selected: browser

.demo li {color: blue;}

What is shown above is that all li elements spa in div.demo are selected

A descendant selector supported by all browsers. 3d

Child element selector (E > F)

The child element selector can only select 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 (E F), in which F is the descendant element of E, while the child element selector E > F, where F is only a child of E. Blog

Ul > li {background: green;color: yellow;}

All child elements li under ul are selected in the code on the. Such as: bfc

IE6 does not support child element selectors. Im

Adjacent sibling element selector (E + F)

The adjacent sibling selector can select the element immediately after another element, and they have the same parent element, in other words, the EF two elements have the same parent element, and the F element follows the E element and is adjacent, so we can use the neighboring sibling element selector to select the F element. Demo

Li + li {background: green;color: yellow; border: 1px solid # ccc;}

The above code indicates selecting the adjacent element li of li. We have a total of ten li here, so the above code selects nine from the second li to 10 li. Please see the effect: db.

Since the above li+li in which the second li is the adjacent element of the first li and the third is the second adjacent element, the third is also selected, and so on, so the last nine li are selected. If we had looked at it in a different way, we might have understood it better: img.

.active + li {background: green;color: yellow; border: 1px solid # ccc;}

Based on the knowledge mentioned earlier, this code obviously selects the adjacent li element after li.active, and notice that there is only one adjacent element after li.active. As in the picture: di

IE6 does not support this selector

Universal sibling selector (E ~ F)

Universal sibling element selector is a new kind of selector added by CSS3, this kind of selector will select all sibling elements after an element, they are also similar to neighboring sibling elements, they must be in the same parent element, in other words, E and F elements are within the same parent element, and F element is after E element, then E ~ F selector will select F elements after all E elements. Such as the following code:

.active ~ li {background: green;color: yellow; border: 1px solid # ccc;}

What the above code represents is that all sibling elements li after the li.active element are selected, as shown in the figure:

The universal sibling selector is very similar to the neighboring sibling selector, except that the neighboring sibling selector selects only the following elements that are adjacent to it (only one element is selected), while the universal sibling selector, select the next sibling element adjacent to the element, it may be confusing to mention it, you can take a closer look at the effect of its neighboring brothers.

IE6 does not support the use of such selectors.

This is the end of the content of "what level selectors does css3 have". 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.