What are css3 hierarchical selectors?

Belong to the css3 hierarchical selectors: 1. Descendant selector "E F", selects all descendant F elements of the E element; 2. Child element selector "E>F", selects all elements under the E element Child element F; 3. The adjacent sibling element selector "E F" selects the element F immediately after the E element; 4. The sibling selector "E~F".

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

Descendant selector (E F)

The descendant selector is also called the containing selector, and its function is to select an element Descendant elements, such as: E F, where E is the ancestor element and F is the descendant element. What it means is that all the descendant F elements of the E element are selected. Please note that a space is needed to separate them. Here, whether F is a child element or grandchild element of the E element or a deeper relationship, it will be selected. In other words, no matter how many levels of relationships F has in E, it will be selected: Browser

.demo li {color: blue;}

The above means that all li elements in div.demo are selectedspa

View all Descendant selector for both devices. 3d

Child element selector (E>F)

The child element selector can only select the child elements of a certain element, where E is the parent element and F is the child element. E>F means that all child elements F under the E element are selected. This is different from the descendant selector (EF), in which F is a descendant element of E, and the child element selector E > F, where F is only a child element of E. blog

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

The code above indicates that all sub-elements li under ul are selected. For example: bfc

IE6 does not support child element selectors. im

Adjacent sibling element selector (E F)

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

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

The above code indicates that the adjacent element li of li is selected. We have a total of ten li here, so the above code selects from the 2nd li to the 10th li, a total of Nine, please see the effect: db

Because of the above li li, the second li is the adjacent element of the first li, and the third It is the second adjacent element again, so the third one is also selected, and so on, so the next nine li are all selected. If we look at it in another way, we may understand it better: img

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

According to the knowledge mentioned above, this code obviously selects the li elements adjacent to li.active. Note that the elements adjacent to li.active are only one. As shown in the picture: di

IE6 does not support this selector

Universal sibling selector (E ~ F)

The universal sibling element selector is a new selector added to CSS3. This selector All sibling elements behind an element will be selected. They are also similar to adjacent sibling elements and need to be in the same parent element. In other words, the E and F elements belong to the same parent element, and the F element is after the E element. , then the E ~ F selectors will select the F elements behind all the E elements. For example, the following code:

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

The above code means that all the sibling elements li behind the li.active element are selected, as shown in the figure:

The universal sibling selector is very similar to the adjacent sibling selector, except that the adjacent sibling selector only selects the elements that are only adjacent to the element (only one element is selected); while the universal sibling element selects Tool, what is selected is the adjacent sibling element behind the element. It may be confusing to mention it this way. You can take a closer look at the renderings of its adjacent sibling elements.

IE6 does not support the use of this selector.

(Learning video sharing: css video tutorial)

The above is the detailed content of What are css3 hierarchical selectors?. For more information, please follow other related articles on the PHP Chinese website!